SVG Path Shape Morphing Playground

Paste two SVG path strings, scrub the morph in real time, and export CSS @keyframes or GSAP code - all client-side.

Vector Design Studio
Start Path (d attribute)
Paste or type an SVG path d string.
End Path (d attribute)
Paste or type an SVG path d string.
0%
Start Shape
Live Morph
End Shape
Live Interpolated Path String
Move the slider to generate the interpolated d value.
CSS @keyframes Export
Provide valid start and end paths to generate animation code.
GSAP MorphSVG Syntax
Provide valid start and end paths to generate GSAP code.
Normalization Report
No paths loaded yet.
Key Terms Explained
SVG Path (d attribute)
The d attribute inside an SVG path element contains a series of drawing commands (M, L, C, Z, etc.) that define the shape's outline as a series of straight lines and curves.
Bezier Curve
A parametric curve defined by anchor points and control handles. Cubic bezier curves (C command) use two control points and are the backbone of smooth SVG shape outlines.
Path Normalization
The process of rewriting two path strings so they contain an identical number of segments and coordinate pairs, making smooth frame-by-frame interpolation mathematically possible.
Interpolation
Computing intermediate values between a start and end value. For paths, this means blending each coordinate pair: x = xStart + (xEnd - xStart) * progress, producing every frame of the morph.
Keyframe
A snapshot of an animation at a specific point in time. In CSS, @keyframes rules define the property values at 0% (start) and 100% (end), and the browser fills in the intermediate states.
ViewBox
An SVG attribute that defines the internal coordinate system. A viewBox of "0 0 200 200" means path coordinates live in a 200x200 unit grid, independent of the element's pixel size on screen.
Node / Vertex
An anchor point on a path where one segment ends and the next begins. More nodes means finer shape detail, but also a larger d string and more coordinate pairs for the morph engine to process.
Midpoint Subdivision
A normalization strategy that splits a segment at its geometric midpoint, inserting a new node without changing the visible shape. Repeated until the node counts of both paths match.

The Complete Guide to SVG Path Morphing

SVG morphing is one of the most visually striking animation techniques on the web - a button that transforms into an arrow, a logo that reshapes into a checkmark, a circle that blooms into a star. Unlike image crossfades, a path morph is resolution-independent, hardware-accelerated, and scriptable with pure CSS or a few lines of JavaScript.

How to Use This Tool

Paste your start shape's d attribute into the left pane and your end shape's d attribute into the right pane. The green dot indicates valid SVG path syntax. Use the Morphing Helper dropdown to load a preset if you want a quick demo. Drag the Animation Progress slider to scrub through the morph frame by frame. When you are happy with the shape pair, copy the CSS @keyframes or GSAP code from the output cards and drop it directly into your project.

If your shapes have mismatched node counts, the normalization engine automatically subdivides the simpler path. The Normalization Report card shows exactly how many segments each path had before and after normalization so you know what was changed.

How the Interpolation Engine Works

Once both paths are normalized to the same segment count, the morph is computed with linear interpolation on every coordinate pair. For a progress value p (0 to 1), each output coordinate is xFinal = xStart + (xEnd - xStart) * p and yFinal = yStart + (yEnd - yStart) * p. The resulting d string is assembled from these blended coordinates and rendered live in the SVG canvas on every slider tick.

For the CSS export, the tool generates a full @keyframes block with the start path at 0% and the end path at 100%, plus the animation shorthand property. For GSAP, it outputs a gsap.to() call targeting the path element's attr.d property, which works without any plugins for simple linear morphs.

Tips for Best Results

Both paths should share the same viewBox coordinate space. If one was drawn in Figma at 24x24 and the other in Illustrator at 512x512, scale one to match the other before pasting. Avoid mixing open paths (no Z command) with closed paths (ends with Z) - the morph will still work, but the fill behavior may look unexpected. For complex illustrations with multiple sub-paths (using M...Z M...Z), use each sub-path individually.

Frequently Asked Questions

Why can't I just morph any two shapes without preprocessing?
SVG path morphing works by interpolating between matching coordinate pairs. If your start path has 4 anchor points and your end path has 8, there is no one-to-one correspondence, so the browser or animation library has nowhere to map each point. The result is either a hard error or a jarring animation where points jump to arbitrary locations. Path normalization solves this by subdividing the simpler path's segments until both paths have the same number of coordinate pairs, giving the interpolation engine clean 1-to-1 mappings.
What is path normalization and why is it required for smooth animations?
Path normalization is the process of rewriting two SVG path strings so they contain an identical number of anchor points and segment commands. The tool converts all relative commands to absolute equivalents, then subdivides whichever path has fewer segments. Subdivision splits one segment into two shorter segments that trace the exact same curve, so the visible shape is unchanged before any animation starts. Once both paths share the same node count, linear interpolation can smoothly blend every coordinate pair frame by frame.
How does this tool handle shapes with different node counts?
The tool parses both path strings into arrays of absolute coordinate commands, counts the points in each, then repeatedly splits the midpoint of the longest remaining segment in the shorter path until the counts match. This greedy midpoint subdivision strategy preserves the original shape geometry while adding the minimum number of extra nodes needed. The Normalization Report card shows the before and after segment counts for each path.
What are the performance benefits of using SVG morphing versus CSS-only shapes?
CSS-only shape techniques like clip-path and border-radius are limited to simple geometry. An SVG path morph can transition between arbitrarily complex outlines - letters, icons, logos, illustrations - with a single animated attribute change. Modern browsers composite SVG attribute animations on the GPU when triggered via the Web Animations API, giving you smooth 60fps transitions without layout thrashing. GSAP MorphSVG additionally handles path normalization at runtime and supports non-linear easing across the morph.
What is a ViewBox and why does it matter for morphing paths?
The viewBox attribute defines the internal coordinate system of an SVG canvas. A viewBox of "0 0 100 100" means your path coordinates live in a 100x100 unit space regardless of how large the SVG element is on screen. When morphing two paths, both must be authored in the same coordinate space. If your start path was designed in a 512x512 viewBox and your end path in a 100x100 viewBox, the coordinates will not align and the morph will appear to jump and scale incorrectly. Normalize both paths to the same viewBox before animating.