Morph SVG Icons — Free GSAP MorphSVG Plugin Snippet

Icon morphing — a play button flowing into a heart, a star melting into a lightning bolt — is the kind of polish users notice without knowing why. CSS can't do it (paths with different point counts aren't interpolatable), but GSAP's MorphSVGPlugin (free on the CDN since 3.13) solves the hard geometry: this snippet keeps four target shapes in <defs> and morphs one visible path between them, with color and a squash-settle riding along.

Why path morphing is genuinely hard

Interpolating d attributes only works when both paths have identical command counts and types — a 3-point triangle and a 10-point star simply can't be lerped natively, which is why CSS d: path() transitions fail on real icons. MorphSVG resamples both shapes into compatible point sets behind the scenes, adding points where needed and matching segments, so *any* path can morph into *any other*. That preprocessing is the entire value of the plugin — the tween that follows is ordinary GSAP.

shapeIndex: 'auto' picks the least-weird correspondence

Even with compatible point sets, morphs can look like taffy if point #1 of the triangle maps to the wrong corner of the star — the shape turns itself inside out in transit. shapeIndex controls the rotational offset of that mapping, and 'auto' tries the candidates and picks the one with the least total point travel. When a specific morph still looks odd, setting an explicit integer (or using GSAP's findShapeIndex utility) is the tuning knob.

Targets live in defs, referenced by selector

The four icon shapes sit as <path> elements inside <defs> — parsed and addressable but never rendered. morphSVG: { shape: '#msi-heart' } accepts that selector directly, so adding a fifth icon is one path plus one button; no path strings in JavaScript. Keeping geometry in markup also means designers can re-export shapes from Figma or Illustrator without touching code.

Fill tweens in the same animation

Each button carries a data-color, and fill interpolates alongside the morph in the same tween, so shape and color arrive together. GSAP tweens SVG presentation attributes natively — no CSS transition needed, no split timing to reconcile.

The elastic squash is separate on purpose

A second fromTo scales the icon from 0.92 with elastic.out(1, 0.45) while the morph runs at power2.inOut. Layering two tweens with different eases on one element gives the transformation weight — the geometry flows while the whole glyph bounces once, and each can be retuned independently.

One caveat: morphs need paths, not primitives

MorphSVG animates <path> elements; <circle>, <rect>, and <polygon> targets must be converted first (the plugin ships MorphSVGPlugin.convertToPath() for exactly this). All shapes here are authored as paths to keep the demo dependency-free of that step.

Customizing it

Add shapes (a path in defs plus a button), auto-cycle the icons on a timer, or morph in response to app state — play/pause is the canonical pair. Related: self-drawing strokes in scroll text draw and draw svg success, blob-style morphing without SVG in scroll shape morph, and animated icon sets in animated svg icons.