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:

1. Compare M 0 0 with M 0 0 → same, no animation

2. Compare L 24 0 with L 24 24 → different coordinates, animate 0→24

3. 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"
/>