Morphing Arbitrary Paths in SVG

Shape morphing animations can be awfully cool. They can be artistic and elaborate like the waving cape of a brand character, or simple and understated like video player controls morphing from one state to another. Alexandru-Gabriel Ică digs into doing this in <svg>. There is a fairly big prerequisite to these kind of animations: the shapes need the same number of points. The trick is typically to use a <path d=""> which is capable of drawing anything, then force both shapes to have the same number of points even if you don’t need them all. Alexandru-Gabriel goes deep on this writing script to convert arbitrary paths into morphable shapes, which is the same kind of thing libraries like Greensock do. I love the idea that you can do the morph directly in CSS.

Wanna learn SVG & Animation deeply?

Frontend Masters logo

We have an incredible course on all things CSS and SVG animation from Sarah Drasner. Sarah comprehensively covers the possibilty of animation, the tools, and does it all in a very practical way.

Leave a Reply

Your email address will not be published. Required fields are marked *