The Core Insight

Same rules apply:

Must use same element (<path>)
Must have same number of commands
Must have same command types in same order
You're animating the arguments of each command

How It Works

Think of path commands as having "slots":

<!-- Start: Rectangle -->
<path d="M 0 0 L 24 0 L 24 24 L 0 24 Z" />

<!-- End: Triangle (move one point) -->
<path d="M 0 0 L 24 24 L 24 24 L 0 24 Z" />

What's animating:

M 0 0 → M 0 0 (no change)
L 24 0 → L 24 24 (24,0 slides to 24,24)
L 24 24 → L 24 24 (no change)
L 0 24 → L 0 24 (no change)
Z → Z (no change)

The Matching Rules

✅ This works (same commands, same count):

<path d="M 0 12 C 6 0 18 24 24 12">
  <animate attributeName="d" to="M 0 12 C 6 12 18 12 24 12" />
</path>

❌ This breaks (different commands):

<path d="M 0 0 L 24 0 L 24 24">
  <animate attributeName="d" to="M 0 0 C 12 0 24 12 24 24" />
</path>

❌ This breaks (different command count):

<path d="M 0 0 L 24 0 L 24 24 L 0 24">
  <animate attributeName="d" to="M 0 0 L 24 24 L 0 24" />
</path>

Practical Examples

Curve to Straight Line

<!-- Curve: control points create arc -->
<path d="M 0 12 C 6 0 18 24 24 12" />

<!-- Straight: control points align with start/end -->
<path d="M 0 12 C 6 12 18 12 24 12" />

Arrow to Checkmark

<!-- Arrow down -->
<path d="M12 4 V14.5 M8.5 11 L12 14.5 L15.5 11" />

<!-- Checkmark -->
<path d="M12 14.5 V14.5 M8.5 11 L12 14.5 L15.5 8" />

The Browser's Logic

The browser goes command by command:

Compare M 0 0 with M 0 0 → same, no animation
Compare L 24 0 with L 24 24 → different coordinates, animate 0→24
Compare C 6 0 18 24 with C 6 12 18 12 → animate all control points

If commands don't match → no animation at all!

Key Strategies

1. Start with same structure

<!-- Both need same command sequence -->
<!-- Start: M L L L Z -->
<!-- End:   M L L L Z -->

2. Use "dummy" points

<!-- Want to "remove" a curve? Make control points = endpoints -->
<path d="M 0 0 C 0 0 100 100 100 100" />
<!-- Effectively a line -->

3. Plan your path structure

<!-- Think: "How do I draw both shapes with identical command structure?" -->

Common Gotchas

Different command types:

<!-- ❌ L → C won't animate -->
<animate from="M 0 0 L 100 100" to="M 0 0 C 50 0 50 100 100 100" />

<!-- ✅ C → C will animate -->
<animate
  from="M 0 0 C 100 0 100 100 100 100"
  to="M 0 0 C 50 0 50 100 100 100"
/>

SVG Path Morph Animations

Comments

More from this blog

Become a cracked product engineer today

Bipedal, humanoid, and the words for creature shapes in games

Lerp and smoothstep, what they actually do

IK and FK, what they actually are

How to make your textures fast on the GPU

The Core Insight

How It Works

The Matching Rules

Practical Examples

Curve to Straight Line

Arrow to Checkmark

The Browser's Logic

Key Strategies

1. Start with same structure

2. Use "dummy" points

3. Plan your path structure

Common Gotchas

Command Palette

Comments

More from this blog

The Core Insight

How It Works

The Matching Rules

Practical Examples

Curve to Straight Line

Arrow to Checkmark

The Browser's Logic

Key Strategies

1. Start with same structure

2. Use "dummy" points

3. Plan your path structure

Common Gotchas