Example of tweening svg paths from one shape to another. (Reactjs, Flubberjs, D3).
https://animated-svg-avatar.web.app/
SVG File is json object with seperate svg paths to different areas of the face.
* // AvatarSvg.js *//
{
head: {
hair : {d: "", id: ""}
main : {d: "", id: ""}
},
face: {
hair : {d: "", id: ""}
mouth : [{d: "", id: ""}, {d: "", id: ""}, {d: "", id: ""}, {d: "", id: ""}]
nose : {d: "", id: ""}
eyes : [{d: "", id: ""}, {d: "", id: ""}, {d: "", id: ""}]
},
{
clothes: {
shirt : {d: "", id: ""}
collar : {d: "", id: ""}
},
},