Design Recipe

Donut Chart Design

A step-by-step guide to building clean, accessible donut charts using SVG and Tailwind — no charting libraries required.

Preview

How It Works

  1. 1Use two overlapping <circle> elements — one for the track, one for the arc.
  2. 2Set strokeDasharray to the full circumference (2 × π × r).
  3. 3Offset with strokeDashoffset to reveal the desired percentage.
  4. 4Rotate the SVG -90deg so the arc starts at 12 o'clock.

Color Tokens

Violet #8B5CF6
Pink #F472B6
Track #1f1a2e
← Back to DocsView Code →