CSS animated pie chart (and donut) — no JavaScript required

Pie charts get a bad reputation from BI dashboards, but in motion graphics they are perfect: a single ratio, big, animated, done. A 5-second video of a donut filling from 0% to 64% communicates "share of voice grew this quarter" better than any line chart.

There are two ways to draw an animated pie chart with zero JavaScript. Both render deterministically to MP4. Here is when to use each.

Technique 1 — conic-gradient (for filled pies)

conic-gradient paints an angular sweep around a center. For a pie chart, the syntax is delightful:

.pie {
  background: conic-gradient(var(--accent) 0 var(--angle), #1a1a1a 0);
}

Set --angle to 120deg for a third of the circle, 216deg for 60%. Animate --angle from 0deg to your target and the slice grows. To make this work in CSS animations (which can't lerp custom properties by default), declare it with @property:

@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

Now --angle is animatable.

The donut hole is just an ::after with the background color, sized to 64% of the parent. Add a label and a value next to it and you have a full chart.

Technique 2 — SVG stroke-dashoffset (for outlined donuts)

When you need a stroked ring instead of a filled wedge — the "progress dial" look — use an SVG circle with stroke-dasharray set to the circle's circumference and animate stroke-dashoffset:

<svg width="220" height="220" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="42"
  fill="none"
  stroke="#1a1a1a"
  stroke-width="10"/>
<circle cx="50" cy="50" r="42"
  fill="none"
  stroke="#ff3b1f"
  stroke-width="10"
  stroke-linecap="round"
  stroke-dasharray="264"
  stroke-dashoffset="95"
  transform="rotate(-90 50 50)"/>
</svg>

The rotate(-90) moves the ring's start from 3 o'clock to 12 o'clock — what people expect. stroke-linecap="round" softens the leading edge.

Multi-segment pies

For a pie with multiple slices (a real share-of-X chart), stack conic-gradient color stops:

background: conic-gradient(
  var(--brand-a) 0 30%,
  var(--brand-b) 30% 55%,
  var(--brand-c) 55% 78%,
  #2a2a2a       78% 100%
);

To animate this from zero, animate each stop's end value with separate custom properties. It's verbose but mechanical — and for a fixed number of slices (usually 3–5), the verbosity is fine.

Color systems for pie charts

A multi-segment pie lives or dies by its color palette. The rule that works:

1. One brand color at full saturation for the headline slice.
2. Two desaturated neighbors for context slices.
3. A neutral gray for "other."

Avoid the BI-tool palette of seven hue-shifted primaries. Three colors plus a gray reads as designed; seven reads as a spreadsheet.

Rendering to MP4

Both techniques are pure CSS/SVG, so they render through the HyperFrames pipeline without any special handling. The conic-gradient version is slightly cheaper to rasterize; the SVG version composites better against textured backgrounds.

If you're targeting Instagram (1080×1080), make the pie 60% of the canvas width and put the label to the right. If you're targeting Reels (1080×1920), stack them vertically. The template is the same; the layout changes per ratio.

When you actually need Chart.js

Pie charts with live tooltips, drill-down click handlers, or thirty-plus segments are not motion-graphics problems — they are dashboard problems. Use a real chart library. But for the one ratio you want to launch a brand campaign around, sixty lines of CSS is the right amount of code.

Open the playground, drop the donut example in, ship the video.