SVG Icon Morph Animation — Gear to Checkmark JS

SVG icon morphing has become one of the defining micro-interactions of modern interfaces: instead of swapping one static icon for another, the shape itself flows from one form into the next. This snippet demonstrates the technique with a concrete, common use case — a settings gear icon that morphs into a checkmark the instant a user saves a form, then morphs back after a short pause.

Why point interpolation instead of CSS `d` animation

Chromium browsers can animate the SVG d attribute directly with CSS if both paths have an identical command structure, but that support is inconsistent across browsers and brittle to author by hand. This snippet instead does the interpolation itself in JavaScript, which works in every browser that supports SVG at all. Both the gear and the checkmark are stored as plain arrays of [x, y] coordinate pairs — gearPts and checkPts — each containing exactly 8 points. Matching the point count is the entire trick: with the same number of vertices in the same order, point 0 of the gear can smoothly travel to point 0 of the checkmark, point 1 to point 1, and so on, without any point needing to appear or disappear mid-animation.

Building the path string

pointsToPath(pts) walks the array and builds a standard SVG path data string — M x0,y0 L x1,y1 L x2,y2 ... Z — starting with a moveto for the first point and lineto commands for the rest, closed with Z. lerpPath(a, b, t) produces an in-between path by linearly interpolating every coordinate: x = ax + (bx - ax) * t. At t = 0 you get the gear exactly; at t = 1 you get the checkmark exactly; anywhere between, you get a genuinely blended shape, not a crossfade of two overlaid icons.

Driving the morph with requestAnimationFrame

animateMorph(from, to, duration, onDone) runs its own animation loop with requestAnimationFrame, computing elapsed time against performance.now(), normalizing it to a 0–1 progress value, applying a cubic ease-out curve, and writing a freshly interpolated d attribute to #morphPath on every frame. This gives frame-accurate control that a CSS transition on d cannot reliably offer, and it means the same function can drive a morph in either direction just by swapping the from/to arrays — which is exactly how the checkmark reverts back into the gear a little over a second after saving.

Designing your own shape pairs

The hardest part of building a custom icon morph isn't the animation code — it's designing two shapes with matching, correspondingly-ordered vertex counts. Start from the simpler shape's silhouette (here, a 4-tooth cog star), count its points, then design the target shape (the checkmark) with the same number of points by subdividing long straight edges with extra collinear midpoints where needed. Collinear midpoints don't distort the static shape, but they give the interpolator enough vertices to keep pace with the more complex silhouette, which keeps the in-between frames looking organic instead of twisted.

Where this pattern fits

Beyond settings-save confirmations, the same lerpPath/animateMorph pair works for any binary or cyclic icon-state change: a bookmark outline morphing to filled, a play triangle morphing to a pause glyph, or a hamburger morphing to a close icon — as long as you design point-matched path pairs for each state. It's a small, dependency-free utility worth keeping in a shared icon-morph module if your app uses the pattern more than once.