Chapter 25 · SVG path morphing
One outline, five destinies
A single closed path sampled at a fixed number of nodes, generated from five different radius functions. Because every form has exactly the same node count, any one of them can be interpolated into any other point for point — no path re-fitting, no sub-path matching, and nothing left to solve at the moment of the transition.
Step the forms from the dock · H folds the dock away
How it works
What is actually being interpolated
A single closed path sampled at a fixed number of nodes, generated from five different radius functions. Because every form has exactly the same node count, any one of them can be interpolated into any other point for point — no path re-fitting, no sub-path matching, and nothing left to solve at the moment of the transition.
Almost every “shape morph” on the web is a cross-fade with a rotation on top, or a library of pre-authored paths matched by eye. Both look like morphing from a distance and both break the moment the shapes are not topologically similar: one has a hole, one has a stem, and the interpolation is a lie.
This page fixes the representation instead of the artwork. The outline
is a closed curve sampled at N points, and each of the
five forms is a different radius function of the same
parameter θ. Five forms, one node count, no exceptions. Morphing
is then arithmetic: P = (1−t)·A + t·B
on every node, with an eased t.
The stroke is rebuilt with Catmull-Rom to cubic Bézier conversion every frame, so the join between one segment and the next is C¹-continuous by construction. There is no corner to see, because there is no corner in the data — and that, rather than the easing curve, is why the movement reads as impossibly smooth rather than merely fast.
- 01Monogram. A six-lobed rosette, one harmonic. The most logo-like of the five.
- 02Landmass. Three and five harmonics with a phase offset, reading as a coastline.
- 03Vessel. A tall, compressed profile with a doubled upper harmonic for the neck.
- 04Badge. A superellipse, sampled on the same parameter, which is the one form that is not a Fourier sum.
- 05Flourish. An asymmetric bloom — first, second and third harmonics, rotated and squashed.
Why the node count is the whole argument
A morph that re-fits a path at every frame has to solve something expensive while the picture is moving, which is exactly when a reader is judging it. A morph between fixed node counts solves nothing: the arithmetic is one multiply and one add per node per frame, and the only cost left is the string. The dock reports the byte length of the path it just wrote, because that number is the honest cost of this page.
Raising Nodes in the dock raises the sample count of every form together, so the five silhouettes stay exactly the same shape and only get smoother. Dropping it to the minimum is the honest way to see what a “morph” looks like when the representation is starved.
- Technique
- SVG path morphing · fixed-node outline interpolation · Catmull-Rom to Bézier
- What it does
- Carries one graphic continuously through several states without a cross-fade, a cut, or a loaded image sequence
- Live demo
- Five forms, one node count, interpolated every frame in the viewport above
- Good for
- Brand marks · product silhouettes · data-to-graphic · icon systems · hero graphics
- Combines with
- Scroll choreography · typography · 3D · scroll-driven video
- Complexity
- Intermediate — the representation is the hard part, not the drawing
- Performance
- CPU path generation, one SVG element. Renders under software rasterisation; degrades to a static composed plate under
prefers-reduced-motion