# SVG Path Morph Animations

# 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":**

```html
<!-- 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):**

```html
<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):**

```html
<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):**

```html
<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

```html
<!-- 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

```html
<!-- 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

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

## 2\. Use "dummy" points

```html
<!-- 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

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

# Common Gotchas

**Different command types:**

```html
<!-- ❌ 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"
/>
```