Semantic Pie/Donut Chart Markup Strategy

A conic-gradient donut chart pattern that pairs the decorative ring with real caption and legend text so the data remains readable without color or motion.

Duration: 2s
Resolution: 1440×900
Format: CSS

donut-chartconic-gradientsemanticsfigcaptiondata-label

usage split semantic donut - 2.4s cycle · 1.00 intensity

Usage64% primary · 23% secondary · 13% remainder

Three segment chart

Usage Split

A donut ring displays a primary percentage while the legend keeps the source data readable.

The visual ring and text legend are driven by the same preset values.

Budget72% primary · 16% secondary · 12% remainder

Readable label first

Budget Ring

The center label mirrors the real percentage instead of relying on CSS counter output.

The ring sweep and visible label use the same value.

Health48% primary · 31% secondary · 21% remainder

Small dashboard card

Health Check

A compact donut keeps the textual status adjacent to the visual chart.

Motion reveals the ring; the data is already present in text.

Usage64% primary · 23% secondary · 13% remainder

Motion contract: The visual ring and text legend are driven by the same preset values.
Accessibility: The figcaption and legend communicate the data without relying on color.

Cycle duration2.4s

Motion intensity1.00

Do not expose only pseudo-element values; keep real DOM text for each segment.

.donut {
  --value: 64;
  background: conic-gradient(
    #67e8f9 calc(var(--value) * 1%),
    #a78bfa 0
  );
  animation: donutSweep 2.40s ease-out both;
}

.donut + figcaption {
  /* Keep readable text values outside the decorative ring. */
}

@media (prefers-reduced-motion: reduce) {
  .donut { animation: none; }
}