A single SVG path interpolates between four organic blob shapes as you scroll. Pure JS — no library — using cubic-bezier control-point lerp.
An SVG shape continuously morphs between several pre-designed forms as the user scrolls. The blob is always recognizable but never quite the same — it pulses, stretches, leans. Used as a hero ornament that signals "something organic and intelligent lives here", typical of AI product pages, music apps, and brand sites that lean into a "design system has a soul" vibe.
Define multiple SVG path data strings with the SAME number of commands and the same command types — that's the key constraint for morphing (otherwise you'd need flubber.js). Parse each path's number coordinates into arrays. On scroll, compute progress 0→1 across N shapes — which two shapes we're between (i, i+1) and the local lerp value (0→1 within that segment). Linearly interpolate each coordinate from shape[i] to shape[i+1] and set the resulting d attribute on the path. Smooth, library-free morphing.
Scroll inside. The blob morphs through four shapes: pebble → wave → crystal → flame.
Build a scroll-driven liquid blob morph. Sticky pin (top:0 height:100vh) inside a 2400px-tall section. Inside the pin, an SVG (viewBox 400 400) containing one <path> element filled with a linear gradient (hot pink → violet → cyan). Define an array of 4 path "d" strings — each must use the SAME command types and counts (so we can interpolate numerically): start each with M, then 7 C cubic-bezier curves, then Z. Examples: Pebble (rounded irregular blob), Wave (horizontal undulation), Crystal (sharper angles), Flame (vertical pull upward). Pre-parse each "d" string into an array of numbers (extract everything between command letters, keep the letters in a parallel array). On scroll: compute progress 0→1, multiply by (shapes.length - 1) to get a float index; floor it for "i" (current shape) and use the fractional part for "t" (lerp within segment 0→1). For each coordinate, lerp(shapes[i][k], shapes[i+1][k], t). Reassemble the "d" string with the original command letters and the new coords, and set it on the path attribute. Also update a "Shape N" label below the blob to the closest named shape. Add a drop-shadow filter and progress bar.