Chapter 03 / SVG motion

Vectors that move.

Line drawing, shape morphing, motion paths, animated icons, a logo intro, living filters and a transit map you can ride. All of it sharp at any size, animated with CSS, SMIL and a little JavaScript. Still no libraries.

Demos

Self-drawing illustration

About 250 generated strokes drawn in order with stroke-dashoffset, a glowing pen tip, and a watercolor wash that sweeps in at the end. Scrub it by hand, or tie it to your scroll position.

  • stroke-dashoffset
  • getTotalLength

Shape morphing

Circle, star, heart, blob, squircle and hexagon, each resampled to the same 120 points so any shape can melt into any other.

  • Path interpolation
  • Spring easing
Click the shape

Motion along a path

The plane follows the curve and turns with its tangent. Draw your own route with the mouse or a finger and it flies that instead.

  • getPointAtLength
  • Pointer drawing
Draw a new route

Living SVG filters

Animated turbulence pushed through a displacement map. The same two filter nodes give water, a boiling hand-drawn line or rising heat.

  • feTurbulence
  • feDisplacementMap
Liquid

Animated icon set

Eight interface icons with real state changes: morphs, draw-ons, a like burst, a ringing bell and a sun that becomes a moon. Click them.

  • CSS transitions
  • pathLength
  • SVG masks

Interactive transit map

Five of the chapters as a metro map. Each chapter is a line, trains run on every line, and every station is a real stop: pick one and ride to that demo, even on another page.

  • Data-driven SVG
  • getPointAtLength
  • Navigation