skip to content

Animating SVGs

I built the header on this site as an animated SVG. Here's what that process looked like and what I learned about making SVG motion feel right.

The header on this site is an animated SVG — a distorted mesh I built in Illustrator and brought to life with about ten lines of CSS.

The mesh in Illustrator

I created the base shape as a distorted mesh in Illustrator. The mesh tool lets you warp a grid of paths — pulling anchor points to create organic, flowing distortion. Exported to SVG, it comes out as dozens of closely-spaced path elements that give it that dense, hand-drawn texture.

Getting it into the browser

The animation — stroke-dasharray and stroke-dashoffset

The whole animation is CSS. No JavaScript.

.line-svg path {
  stroke-dasharray: 5;
  stroke-dashoffset: 10;
  animation: dash 10s forwards infinite linear;
}

@keyframes dash {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

stroke-dasharray breaks each path into dashes. stroke-dashoffset controls where those dashes start along the path. Animating the offset makes the dashes appear to flow — applied to all the mesh paths at once, it gives the whole header that moving, alive quality.

Why this works

The density of the mesh paths is what makes it interesting. A single animating path would just be a marching line. Dozens of them running simultaneously, each slightly different in shape, creates something that reads more like texture or grain in motion.

What I’d tweak