Get the latest tech news
Morphing Arbitrary Paths in SVG
While the SVG format gives us a way to morph between two paths with the same number of points using `<animate>`, we can use a few tricks to morph between arbitrary paths too!
This command draws an elliptical arc, which Bézier curves are not able to represent exactly, but they are pretty good at approximating it. AA...ABBBB...BBBI hope this illustration is intuitive: when the number of sub-paths differ, we make some parallel animations to achieve the morphing effect. When I first learned about it around 8 years ago, I remember that I tried to understand how arbitrary shapes could be morphed together, and I couldn’t really figure it out at that time.
Or read this on Hacker News