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

SVG loaders

Six loading indicators built on three ideas: the dashoffset orbit, the animation-delay stagger, and SMIL value interpolation. All vector, all resolution-independent, zero JS.

Ring dashoffset

A 30-unit comet on a 100-unit track; dashoffset: 0 → -100 is exactly one lap. The grey circle underneath is a second, static copy.

Staggered dots

One keyframe rule, three animation-delays. The stagger is the whole trick — remove it and the loader dies.

Polyline draw

Dashoffset runs +100 → -100 in one animation: the first half draws the line, the second half erases it from behind. Continuous, no keyframe juggling.

Logo path trace

The ring loader generalized: duplicate your logo path, dim the bottom copy, orbit a dash along the top one. pathLength="100" keeps the math fixed.

Concentric waves

Radius is animated in CSS — r is a geometry property now. Three staggered ripples fade as they grow; the core dot anchors the eye.

Organic blob morph

SMIL <animate attributeName="d"> with structure-compatible path values (same commands, same count). calcMode="spline" smooths the wobble.