svg-animation-lab Hand-crafted SVG animation techniques — SMIL and CSS only

SVG animation, hand-crafted.

Twenty-six demos of vector motion with zero dependencies and zero build — every effect is inline SVG animated with CSS or SMIL. Clone, open index.html, read the comments: each demo is written to teach the technique behind it, not just to look good.

Animated icons 7 demos

Hamburger→X, play→pause, like heart with particles, bell with badge, checkmark draw-on, submit state machine, sun→moon theme toggle. Interactive — CSS owns the motion, JS only flips state.

Loaders 6 demos

Dashoffset ring, staggered dots, polyline draw, logo path trace, concentric waves, and an organic blob morphing via SMIL d interpolation.

Line-art drawing 5 demos

The stroke-dasharray drawing trick, five ways: self-writing signature, traced geometric gem, hover-drawn card border, ornamental divider, constellation map.

Text effects 4 demos

Flowing gradient fill, stroke-traced glyphs that fill themselves, text riding a bézier via textPath, and a liquid wave mask.

Living charts 4 demos

Dashboard charts that animate on load: staggered bars (pure SMIL — works in a GitHub README via <img>), line trace with area fade, progress ring, sparkline with a live pulse.