Anime.js SVG Shape Morph — Free Blob Path Morphing Snippet

Morphing one SVG shape smoothly into another is a deceptively hard problem — a naive crossfade just overlaps two static shapes, it doesn't actually transform one outline into the next. anime.js solves this by animating an SVG path's d attribute directly: given two path strings with the same number of coordinate points, it interpolates each point's position frame by frame, producing a genuine shape transformation rather than a fade.

Why the point count has to match

All four shapes in this snippet's shapes array are built from the same cubic-bezier blob generator pattern, each with exactly the same number of C (curve) commands and coordinate pairs. anime.js's d attribute interpolation works by matching up corresponding points between the "from" and "to" path strings positionally — if one shape had a different number of points than the next, there would be no clean one-to-one mapping and the morph would look broken or jump discontinuously rather than flow.

A timeline instead of a single animation

Rather than one anime({...}) call, this snippet uses anime.timeline({ loop: true, direction: 'alternate' }) and adds one step per remaining shape via timeline.add({ d: [{ value: d }] }, '+=400'). Each .add() call queues the next morph target, and the '+=400' offset inserts a short hold before starting the next morph, so the blob doesn't immediately flow from one shape into the next with zero pause. Because the timeline loops with direction: 'alternate', it plays forward through all four shapes and then reverses back through them, rather than jumping from the last shape back to the first.

Interpolating path data, not just simple values

Most anime.js usage animates numeric CSS properties or transforms — this snippet demonstrates a less common but powerful capability: passing a raw SVG path string as the value for the d property. anime.js parses both the current and target path data, extracts their numeric coordinates, and tweens those numbers directly, then reconstructs a valid path string at every animation frame. This is meaningfully different from, and more capable than, CSS transitions, which cannot animate the d attribute at all.

Play/pause control

The timeline object returned by anime.timeline() exposes .play() and .pause() methods directly, which this snippet wires to a button — because the whole four-shape loop lives on one timeline instance, pausing and resuming affects the entire sequence at whatever point it's currently morphing through, rather than needing to track state per shape.

Customizing it

Add more shapes to the array (keeping the point count consistent), adjust duration or the '+=400' hold time, swap easeInOutQuad for a different easing curve, or drive the morph from a button click or scroll trigger instead of an automatic loop. Pair this with Liquid Blob for a complementary blob effect, or a Confetti Button for a playful interaction nearby.