SVG / SVG paths · Cubic Bézier curves · requestAnimationFrame
SVG Morph Studio
Inspect how sampled closed contours become corresponding points and a continuously interpolated SVG path.
LIVE SURFACE / 01
Follow the anchors. Watch one closed path become another.
STUDIO / SVG-MORPH
The canvas is ready
when you are.
Nothing runs in the background. Open the preview to start the experiment.
Loading the local experiment runtime…
FIELD NOTES / SVG GEOMETRY
Correspondence makes a morph possible.
Normalize the geometry
Each trusted preset is sampled into the selected number of points on a shared angular parameterization. Equal point counts give each source anchor one destination partner. Cyclic phase alignment chooses the target starting point with the least total squared travel.
Winding and closure
All presets are emitted as one closed contour with the same signed winding. Matching direction prevents anchors from traveling around opposite edges. There is no open-path mode, hole, compound path, or arbitrary SVG parser.
Interpolate anchors, then draw
At normalized progress t, each x/y coordinate is linearly interpolated between its corresponding endpoints. A closed Catmull–Rom conversion derives cubic Bézier control handles from neighboring interpolated anchors; the path is rebuilt from absolute M/C commands and Z on each active frame.
Easing and frame scheduling
Elapsed time is clamped to the chosen duration and mapped through linear, cubic ease-out, or smoothstep ease-in-out. requestAnimationFrame runs only during playback; Pause preserves elapsed time and geometry, Resume continues, and Restart samples the chosen source again.
Resolution has a cost
The point control changes both correspondence density and the number of cubic segments. Each frame builds an O(n) contour and path string. Changing resolution fits new anchors to samples of the current cubic contour; that bounded least-squares rebase costs more than a frame update and runs only when a control changes.
Changing shapes mid-morph
A valid control update keeps the visible cubic contour as its start, fits a new anchor set when resolution changes, and begins a fresh timed leg toward the selected destination. The fit preserves winding and starting phase; reducing resolution can still simplify detail slightly.
What is supported
The five original presets are single, star-shaped, closed contours designed to share a polar origin: circle, rounded square, five-point star, organic blob, and signal emblem. Correspondence and cubic smoothing are tuned for this authored family; self-intersection is not mathematically prevented for arbitrary contours.
What is not supported
Direct command-string interpolation is unsafe when commands differ. This studio does not accept uploaded paths, multiple subpaths, holes, open strokes, text outlines, or arbitrary SVG. Those require parsing, winding and topology checks, robust arc conversion, and feature-aware correspondence beyond this bounded learning example.
Reduced motion and alternatives
The system preference initializes the explicit control. When enabled, the destination is shown as a static path while source, target, anchors, segment count, and the written explanation remain available. No geometric information depends on animation.
SOURCE / LICENSE
Original implementation · MIT · no external assets