animate-svg

Files (4)

• SKILL.md
• .gitkeep · examples/
• .gitkeep · scripts/
• svg_tools.py · scripts/

SKILL.md (first lines)

# Animate SVG

Handcraft beautiful, resolution-independent SVG animations — from lightweight micro-interactions and animated UI icons to multi-stage vector illustrations, path-drawing reveals, and shape-morphing transitions.

---

## When to Use

Invoke this skill whenever the user asks to:
- Build animated SVG graphics, icons, loaders, badges, or illustrations.
- Implement path-drawing line animations (e.g. signature reveals, checkmarks, progress outlines).
- Create shape-morphing transitions (e.g. hamburger-to-X, play-to-pause).
- Create standalone animated SVGs using native SMIL for use in `<img>` tags or CSS background images.
- Animate SVGs with CSS keyframes, transitions, and CSS motion paths (`offset-path`).
- Optimize, measure, or debug SVG animation performance and geometry.

---

## Progressive Workflow

Follow this step-by-step checklist to produce clean, maintainable SVG animations:

1. **Determine the Host Environment:**
   - **Standalone SVG (`<img>` or CSS background):** Must use native **SMIL** (`<animate>`, `<animateTransform>`). External CSS and JavaScript will **not** execute.
   - **Inline SVG (`<svg>` in DOM):** Can use **CSS animations/transitions**, Web Animations API, or SMIL. Preferred when coordinating with webpage states, theme tokens, or hover interactions.

2. **Construct Responsive Geometry:**
   - Define a clean `viewBox="minX minY width height"` (e.g., `0 0 100 100` or `0 0 24 24`).
   - Omit hardcoded `width` and `height` attributes on the SVG element so it scales fluidly with CSS containers.
   - Place reusable gradients, clip-paths, filters, and masks inside a `<defs>` block.

3. **Measure & Align Paths (if using stroke-draw or morphing):**
   - For line-drawing animations, compute or estimate the path arc length to set `stroke-dasharray` and `stroke-dashoffset`.
   - For shape morphing, ensure starting and ending shapes share the exact same number and order of path commands.
   - Run the bundled helper script to compute path lengths or check morph compatibility:
     ```bash
     python skills/animate-svg/scripts/svg_tools.py measure --file <path-to-svg>
     python skills/animate-svg/scripts/svg_tools.py check-morph --d1 "<path1>" --d2 "<path2>"
     ```

4. **Apply Animations & Easing:**
   - In CSS, always set `transform-origin: center` explicitly when rotating or scaling SVG elements.
   - In SMIL, use `calcMode="spline"` with `keySplines` (cubic-bezier control points) for natural, organic motion.
   - Use `fill="freeze"` on finite SMIL animations to prevent elements from snapping back to their initial state.

5. **Ensure Accessibility & Reduced Motion:**
   - Add `role="img"`, `<title>`, and `<desc>` elements for screen readers.
   - Include a `@media (prefers-reduced-motion: reduce)` rule to disable or soften animations for users sensitive to motion.

---

## Bundled Resources

- `scripts/svg_tools.py`: Python CLI utility to calculate path lengths for `stroke-dasharray`, check shape-morph command topologies, and scaffold accessible SVG markup.
- `examples/`: Directory reserved for project-specific SVG templates and sample assets.

---

## SVG Fundamentals

### Coordinate System
SVGs use a coordinate system defined by `viewBox="minX minY width height"`. The viewBox is your canvas — all coordinates are relative to it, making SVGs resolution-independent.

```svg
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- 200x200 unit canvas, scales to any size -->
</svg>
```

### Shape Primitives

```svg
<rect x="10" y="10" width="80" height="40" rx="4" fill="#1a1a1a" />
<circle cx="50" cy="50" r="30" fill="#e63946" />
<ellipse cx="50" cy="50" rx="40" ry="20" fill="#457b9d" />
<line x1="10" y1="10" x2="90" y2="90" stroke="#2a9d8f" stroke-width="2" />
<polygon points="50,5 95,90 5,90" fill="#e9c46a" />
<polyline points="10,80 40,20 70,60 100,10" fill="none" stroke="#264653" stroke-width="2" />
```

### The `<path>` Element — The Power Tool

The `d` attribute defines a path using commands. Uppercase = absolute, lowercase = relative.

| Command | Purpose | Syntax |
|---------|---------|--------|
| M/m | Move to | `M x y` |
| L/l | Line to | `L x y` |
| H/h | Horizontal line | `H x` |
| V/v | Vertical line | `V y` |
| C/c | Cubic bézier | `C x1 y1, x2 y2, x y` |
| S/s | Smooth cubic bézier | `S x2 y2, x y` |
| Q/q | Quadratic bézier | `Q x1 y1, x y` |
| T/t | Smooth quadratic | `T x y` |
| A/a | Elliptical arc | `A rx ry rotation large-arc sweep x y` |
| Z/z | Close path | `Z` |

**Cubic Bézier** (`C`): Two control points define the curve. The first control point sets the departure angle, the second sets the arrival angle.

```svg
<path d="M 10 80 C 40 10, 65 10, 95 80" stroke="#000" fill="none" stroke-width="2" />
```

**Smooth Cubic** (`S`): Reflects the previous control point automatically — perfect for chaining fluid S-curves.

```svg
<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="#000" fill="none" />
```

**Arc** (`A`): `rx ry x-rotation large-arc-flag sweep-flag x y`
- `large-arc-flag`: 0 = small arc, 1 = large arc (>180°)
- `sweep-flag`: 0 = counterclockwise, 1 = clockwise

```svg
<!-- Heart shape using arcs and quadratic curves -->
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 Z"
      fill="#e63946" />
```

From AdityaS1204/skills-github, MIT.

More from AdityaS1204/skills-github