Skip to content

Latest commit

 

History

History
36 lines (31 loc) · 820 Bytes

README.md

File metadata and controls

36 lines (31 loc) · 820 Bytes

Smooth-SVG-Transformations

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: ""}
    },
  },
  

demo: https://animated-svg-avatar.web.app/

image