Skip to content

Example of tweening svg paths from one shape to another. (Reactjs, Flubberjs, D3).

Notifications You must be signed in to change notification settings

tcanbolat/Smooth-SVG-Transformations

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Example of tweening svg paths from one shape to another. (Reactjs, Flubberjs, D3).

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published