Morphing Arbitrary Paths in SVG

Paths in SVG can already be morphed with <animate> for the 'd' attribute. The catch is that the paths need to have exactly the same number of points and the drawing commands need to be of exactly the same type. You can’t morph a line into a curve, for example. post

I’d argue, however, that the more common use case is having some existing paths that you want to morph. In that case, you don’t really need a big JS library loaded at runtime, and you can just generate the animations beforehand. And in this blog post I want to explain how that can be achieved.

You can always look at the code of this post which includes all the important implementation details. javascript