Chapter 27: SVG Animation
SVG Animation
I’m going to explain it like we’re sitting together building moving graphics step by step — slowly, clearly, with many copy-paste examples you can run immediately.
What does “SVG Animation” actually mean?
SVG animation means making shapes, paths, text, gradients, filters, transforms, etc. change over time — move, rotate, scale, change color, morph, fade, stroke-draw, pulse, bounce, follow a path, etc.
SVG has three main native animation methods in 2025–2026 (plus CSS and JavaScript as helpers):
| Method | Technology / Tag | Best for | Learning curve | Browser support 2026 | Flexibility | Performance |
|---|---|---|---|---|---|---|
| SMIL (SVG’s own) | <animate>, <animateMotion>, <animateTransform>, <set> | Pure SVG, declarative, path following, morphing | Medium | Good (but declining) | ★★★★☆ | ★★★★☆ |
| CSS Transitions / Animations | transition, @keyframes | Simple hover effects, scale, rotate, opacity | Easy | Excellent | ★★★☆☆ | ★★★★★ |
| JavaScript | Web Animations API, GSAP, Anime.js, Snap.svg, etc. | Complex sequences, physics, interaction, timelines | Hard → Medium | Excellent | ★★★★★ | ★★★★☆ |
Important reality check in 2026 Chrome has deprecated SMIL since ~2020 and removed it completely in 2025 (Chrome 130+). Firefox still supports it (with warning), Edge follows Chrome → SMIL is effectively dead for production in modern projects.
So what do we actually use today?
- CSS animations → 70–80% of everyday SVG animation
- Web Animations API (native JS) or lightweight libraries → complex cases
- SMIL → only for learning / nostalgia / very specific legacy cases
We’re going to focus on what actually works reliably in 2026 — mainly CSS + a little Web Animations API.
1. CSS Animation – The modern workhorse (most recommended)
You can animate almost any SVG presentation attribute or CSS property.
Common animatable properties:
- transform: translate, scale, rotate, skew
- opacity
- fill, stroke, stroke-width, stroke-dashoffset
- r, cx, cy (circle attributes)
- x, y, width, height (some shapes)
- font-size, letter-spacing (text)
Example 1 – Simple pulsing circle (CSS keyframes)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<svg width="200" height="200" viewBox="0 0 200 200"> <style> .pulse { animation: pulse 2s infinite ease-in-out; } @keyframes pulse { 0%, 100% { r: 60; opacity: 0.7; } 50% { r: 80; opacity: 1; } } </style> <circle class="pulse" cx="100" cy="100" r="60" fill="#FF5722"/> </svg> |
→ Circle grows and shrinks + fades in/out forever.
Example 2 – Rotating icon on hover (very common pattern)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<style> .gear { transform-origin: center; transition: transform 0.6s ease; } .gear:hover { transform: rotate(180deg); } </style> <svg width="120" height="120" viewBox="0 0 120 120"> <g class="gear"> <path d="M60 20 L70 40 ... (gear path here)" fill="#2196F3"/> <!-- or use simple circle + lines for demo --> <circle cx="60" cy="60" r="30" fill="none" stroke="#2196F3" stroke-width="12"/> <line x1="60" y1="30" x2="60" y2="90" stroke="#2196F3" stroke-width="12"/> <line x1="30" y1="60" x2="90" y2="60" stroke="#2196F3" stroke-width="12"/> </g> </svg> |
Hover → gear spins 180° smoothly.
Example 3 – Drawing / revealing a path (stroke-dasharray animation)
This is one of the most loved SVG animation techniques — “line drawing” effect.
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<svg width="300" height="200" viewBox="0 0 300 200"> <style> .draw { fill: none; stroke: #4CAF50; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1000; /* longer than path length */ stroke-dashoffset: 1000; animation: draw 4s linear forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } </style> <path class="draw" d="M 40 100 Q 150 20, 260 100 T 260 100"/> </svg> |
→ Path is “drawn” from start to end over 4 seconds.
Pro tip: Use JavaScript to set stroke-dasharray dynamically to exact path length:
|
0 1 2 3 4 5 6 7 8 9 |
const path = document.querySelector('path'); const length = path.getTotalLength(); path.style.strokeDasharray = length; path.style.strokeDashoffset = length; |
Example 4 – Animate gradient stop (color shift)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<svg width="400" height="160"> <defs> <linearGradient id="movingGrad"> <stop offset="0%" stop-color="#FFEB3B"> <animate attributeName="stop-color" values="#FFEB3B;#F44336;#2196F3;#FFEB3B" dur="6s" repeatCount="indefinite"/> </stop> <stop offset="100%" stop-color="#F44336"/> </linearGradient> </defs> <rect width="100%" height="100%" fill="url(#movingGrad)"/> </svg> |
→ Colors cycle smoothly — notice we used SMIL <animate> inside <stop> (still works in Firefox & some legacy contexts, but better to use CSS for production).
Quick Decision Guide 2026
| You want to animate… | Best choice in 2026 | Why |
|---|---|---|
| Hover scale / rotate / opacity | Pure CSS transition | Easiest, best perf |
| Infinite loop (pulse, spin forever) | CSS @keyframes | Clean, no JS |
| Path drawing / stroke animation | CSS + stroke-dashoffset | Classic, reliable |
| Complex timeline / sequence | Web Animations API or GSAP | Full control |
| Morph shape A → shape B | SMIL <animate> (legacy) or JS libraries | SMIL deprecated |
| Follow a motion path | CSS offset-path (modern) or SMIL <animateMotion> | offset-path winning |
Common beginner mistakes
- Forget transform-origin: center → rotation around wrong point
- Use SMIL in Chrome → nothing happens (deprecated)
- Wrong stroke-dasharray value → no drawing effect
- Animate r / cx on <circle> in CSS → doesn’t work (use SMIL or JS)
- Too many properties animated → performance drop
Mini practice tasks
- Make a star that rotates slowly forever (@keyframes)
- Create a checkmark path that draws itself on page load
- Make a button that grows + changes color on hover (CSS only)
Paste your code here if you want feedback — I’ll review it like we’re debugging together 😄
SVG animation is where your graphics come alive — once you get comfortable with CSS keyframes + stroke animation, you can create very impressive interactive icons, loaders, illustrations, and UI elements.
Next we can go deeper into:
- offset-path for motion along curve
- Web Animations API basics
- Morphing shapes
- GSAP for pro-level timelines
Which direction excites you most? Or any example confusing? Just tell me — we’ll keep building until it feels magical! 🚀
