vanilla / zero build loading runtime

morphicons SVG Icon Morphing Library Demos

Download Back To CSSScript.Com

Animate Lucide, Tabler, Heroicons outline, Iconoir, and custom SVG paths with a dependency-free icon morphing library.

01 / live morph

Shape in motion

Click any target or tap the stage. Mid-flight changes preserve the current shape and spring velocity.

current pair
Menu → X
loading
from Menu
to X
click stage to cycle targets
From raw d
To raw d
Driver mode morphTo / seek
Live progress 1.00
Spring preset snappy · 420 / 30
Stiffness 420
Damping 30
Custom values are applied the next time the morph starts.
plan waiting for runtime
alignment —
verdict —

Target palette

raw d + IconNode inputs / all on one canvas

02 / pure core

Two paths, one plan

Both previews use the same resampled pair. Only the interpolation strategy changes.

pair Menu → X t = 0.50
Polar interpolation rotation + scale
Similarity is decomposed before the residual shape is blended.
Linear interpolation coordinate lerp
The same correspondence is kept, with no rotation decomposition.
Scrub both renderers 0.50
03 / input surface

Data stays lightweight

The page feeds the same DOM driver with raw SVG path data, structural IconNode data, and an off-grid path.

Raw path input string d

Path strings can include multiple subpaths and SVG commands. The palette includes arcs, curves, and open strokes.

Menu, X, arrows, heart, search
Directly accepted by createMorph
IconNode input tagged geometry

Structural nodes cover lines, circles, ellipses, rectangles, polylines, and polygons without a library adapter.

fitIcon: ready
source formats raw d + IconNode
active grid 24 × 24 shared viewBox
motion preference full motion