SVG Shape Morph
One path flowing between four shapes, on scroll or on click. No sprite sheet, no video, no paid plugin: the path is generated from a ring of radii, and morphing is just easing those numbers from one set to the next.
How it works without MorphSVG
Same point count, always
Morphing two arbitrary paths is hard because they rarely share a point count. Here every shape is twelve points around a circle, differing only in radius, so interpolation is trivial and always valid.
Catmull-Rom to bezier
Twelve points joined with straight lines would look like a polygon. Control points are derived from each neighbour pair, which turns the ring into a smooth closed curve.
Tween the array, not the string
GSAP eases the radii array with endArray, and the path string is rebuilt on each update. One tween, no string parsing, and it stops cleanly if you interrupt it mid-morph.