svg-animations

Handcrafted SVG animation. Every SVG element is a DOM node you can style, animate, and script; the craft is picking the right animation layer and dodging the handful of gotchas below.

Read references/recipes.md when you need a ready-made pattern: loading spinner, animated checkmark, hamburger-to-X morph, motion along a path, gradient color shift, pulsing glow, or wave.

Choose the Animation Layer

SMIL (<animate>, <animateTransform>, <animateMotion>, <set>) lives inside the SVG markup and keeps working when the file is loaded via <img> or CSS background-image, where CSS and JS cannot reach. Prefer SMIL for self-contained assets (icons, logos); use CSS keyframes when the SVG is inlined and the animation should coordinate with the rest of the page.

Gotchas That Bite

• transform-origin: center: SVG transforms default to the viewBox origin (0,0), not the element center. Set it explicitly in CSS, or pass explicit center coordinates in SMIL (from="0 25 25" to="360 25 25").
• fill="freeze" on SMIL animations keeps the final state; without it the element snaps back to the start.
• Shape morphing (SMIL values on d, or the CSS d property) interpolates only between paths with the same number and types of commands in the same order. If shapes differ, add invisible intermediate points to equalize.
• Use path.getTotalLength() for exact lengths in stroke-drawing animations instead of guessing dash values.
• Size with viewBox only; hardcoded width/height breaks resolution independence. Put gradients, filters, masks, and reusable shapes in <defs>.
• stroke-linecap="round" makes line animations look polished.

The Stroke Drawing Trick