---
name: svg-animations
description: Create beautiful, performant SVG animations and illustrations. Use this skill when the user asks to create SVG graphics, icons, illustrations, animated logos, path animations, morphing shapes, loading spinners, or any animated SVG content. Covers SMIL animations, CSS-driven SVG animation, path drawing effects, shape morphing, motion paths, gradients, masks, and filters.
---
This skill guides creation of handcrafted SVG animations — from simple animated icons to complex multi-stage path animations. SVGs are a markup language for images; every element is a DOM node you can style, animate, and script.
## 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
```
### Shape Primitives
```svg
```
### The `` 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
```
**Smooth Cubic** (`S`): Reflects the previous control point automatically — perfect for chaining fluid S-curves.
```svg
```
**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
```
### Grouping and Transforms
```svg
```
Use `` to group elements for collective transforms, styling, and animation targets.
### Gradients, Masks, and Filters
```svg
```
---
## CSS Animations on SVG
Many SVG attributes are valid CSS properties: `fill`, `stroke`, `opacity`, `transform`, `stroke-dasharray`, `stroke-dashoffset`, etc.
### Basic CSS Animation
```css
.pulse {
animation: pulse 2s ease-in-out infinite;
transform-origin: center;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.15);
opacity: 0.7;
}
}
```
### Stroke Drawing Animation (The Classic)
The most iconic SVG animation. Uses `stroke-dasharray` and `stroke-dashoffset` to make a path appear to draw itself.
**How it works:**
1. Set `stroke-dasharray` to the path's total length (one giant dash + one giant gap)
2. Set `stroke-dashoffset` to the same length (shifts the dash off-screen)
3. Animate `stroke-dashoffset` to 0 (slides the dash into view)
```svg
```
**Getting exact path length in JS:**
```js
const path = document.querySelector(".draw");
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
```
### Staggered Multi-Path Drawing
```css
.line-1 {
animation-delay: 0s;
}
.line-2 {
animation-delay: 0.3s;
}
.line-3 {
animation-delay: 0.6s;
}
```
### CSS `d` Property Animation
Modern browsers support animating the `d` attribute directly in CSS:
```css
path {
d: path(
"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"
);
transition: d 0.5s ease;
}
path:hover {
d: path(
"M 10,50 A 20,20 0,0,1 50,10 A 20,20 0,0,1 90,50 Q 90,80 50,100 Q 10,80 10,50 z"
);
}
```
**Requirement:** Both paths must have the same number and types of commands for interpolation to work.
---
## SMIL Animations (Native SVG)
SMIL animations are declared directly inside SVG markup. They work even when SVG is loaded as an `` or CSS `background-image` — where CSS and JS can't reach.
### `` — Animate Any Attribute
```svg
```
With keyframes:
```svg
```
### `` — Transform Animations
```svg
```
Types: `translate`, `scale`, `rotate`, `skewX`, `skewY`
### `` — Move Along a Path
```svg
```
`rotate="auto"` orients the element tangent to the path. `rotate="auto-reverse"` flips it 180°.
### `` — Discrete Value Changes
```svg
```
### Timing and Synchronization
```svg
```
Trigger values:
- `begin="click"` — on click
- `begin="2s"` — after 2 seconds
- `begin="other.end"` — when another animation ends
- `begin="other.end + 1s"` — 1s after another ends
- `begin="other.repeat(2)"` — on 2nd repeat of another
### Easing with `calcMode` and `keySplines`
```svg
```
`calcMode` options: `linear` (default), `discrete`, `paced`, `spline`
`keySplines` takes cubic-bezier control points (x1 y1 x2 y2) per interval. Common easings:
- Ease-in-out: `0.42 0 0.58 1`
- Ease-out: `0 0 0.58 1`
- Bounce-ish: `0.34 1.56 0.64 1`
### Shape Morphing with SMIL
Both shapes must have identical command structures (same number of points, same command types):
```svg
```
---
## Animation Patterns & Recipes
### Loading Spinner
```svg
```
### Animated Checkmark
```svg
```
### Morphing Hamburger to X
```svg
```
### Gradient Animation (Color Shift)
```svg
```
### Breathing / Pulsing Glow
```svg
```
### Wave / Liquid Effect
```svg
```
---
## Best Practices
1. **Use `viewBox`, never hardcode `width`/`height` in the SVG** — let the container size it. This keeps it resolution-independent.
2. **`` for reusable definitions** — gradients, filters, masks, clipPaths, and reusable shapes belong in ``.
3. **Prefer SMIL for self-contained SVGs** (icons, logos loaded via ``) — CSS/JS won't work there. Use CSS animations when the SVG is inlined and you want to coordinate with the rest of the page.
4. **Shape morphing requires matching commands** — same number of path commands, same types, same order. If shapes differ, add invisible intermediate points to equalize.
5. **`stroke-linecap="round"`** makes line animations look polished.
6. **`fill="freeze"`** in SMIL keeps the final animation state. Without it, the element snaps back.
7. **`transform-origin: center`** in CSS — SVG transforms default to the origin (0,0), not the element center. Always set this explicitly.
8. **Use `getTotalLength()`** in JS to get exact path lengths for stroke animations instead of guessing.
9. **Layer animations with `` groups** — animate the group transform separately from individual element properties for complex choreography.
10. **Performance:** SVG animations are GPU-composited when animating `transform` and `opacity`. Animating `d`, `points`, or layout attributes triggers repaints — use sparingly on complex SVGs.
11. **`will-change: transform`** on animated SVG elements helps the browser optimize compositing.
12. **Accessibility:** Add `role="img"` and `` / `<desc>` elements. Use `prefers-reduced-motion` media query to disable animations for users who request it:
```css
@media (prefers-reduced-motion: reduce) {
svg * {
animation: none !important;
transition: none !important;
}
}
```