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.