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

Living charts

Dashboard-style charts that animate on load — no charting library, no JS. The bars are pure SMIL on purpose: save that SVG as a file and it animates anywhere an image loads, including a GitHub README.

Staggered bar growth

Pure SMIL: height and y animate together (rects grow downward, so y must retreat). Stagger = begin offsets; easing = keySplines; the bars hold via fill="freeze".

Line trace + area fade

The polyline draws with the pathLength="1" dashoffset trick; a polygon with the same points fades in underneath at 85% of the trace. Two cheap effects, sequenced, read as one.

Progress ring

With pathLength="100", dashoffset is a literal percentage: offset 28 = 72% shown. The number pops in with an overshoot bezier as the ring lands. One number to change, everything else stays.

Sparkline + live pulse

The inline-scale version of the line trace, plus a two-circle ping: solid dot + expanding echo. The echo scales from its own center via transform-box: fill-box.

These techniques survive an <img> tag. GitHub strips inline <svg> from READMEs, but an SVG file referenced via <img src="chart.svg"> keeps playing — both SMIL and CSS keyframes embedded inside the .svg file autoplay there. What you lose in <img> is interactivity: no JS, no :hover, no clicks. That is why animated stats cards in GitHub READMEs work at all — and the bar chart above is written in pure SMIL so you can lift it straight into one. Full compatibility table in the README.