SVG Animation

ELI5 — The Vibe Check

SVG animation brings vector graphics to life with smooth, scalable motion that looks sharp on any screen. Unlike canvas, every element is in the DOM, so you can click, hover, and style individual shapes. It's like animating a coloring book where every crayon stroke is interactive.

Real Talk

SVG animations can be achieved through SMIL (declarative, limited browser support), CSS animations on SVG elements, or JavaScript libraries (GSAP, Framer Motion). Since SVGs are DOM elements, they support event handlers, accessibility attributes, and CSS styling.

Show Me The Code

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue">
    <animate attributeName="r" values="40;45;40" dur="1s" repeatCount="indefinite" />
  </circle>
</svg>

When You'll Hear This

"Use SVG animation for the logo — it needs to be crisp at any size" / "GSAP handles our complex SVG path animations way better than CSS alone"