← Back to gallery
CSSFeatured

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.

donut-chartconic-gradientsemanticsfigcaptiondata-label

Data Viz / Semantic Donut

Semantic Pie/Donut Chart Markup Strategy

A decorative conic-gradient donut paired with readable text values so the chart meaning survives without the visual ring. Three visualization shapes, one accessible markup strategy.

Storage AllocationDocuments 64% · Photos 23% · Free 13%

Multi-segment breakdown

Storage Allocation

A 3-segment donut shows how a quota is split. The legend mirrors each slice in plain text so the breakdown survives without color or geometry.

  • conic-gradient
  • figcaption
  • multi-segment
Profile CompletionComplete — Keep going

Single-percentage progress

Profile Completion

A single-value progress ring uses one accent segment against a neutral track. The center label and figcaption both expose the same percentage so screen readers can read it cleanly.

  • progress
  • single-value
  • a11y
System StatusAll systems normal — 98% healthy

Compact dashboard indicator

System Status

A small inline ring sits beside a status sentence. The donut is purely decorative — the status text already communicates the value to assistive tech and reduced-motion fallbacks.

  • inline
  • status
  • compact

Donut inspector

Storage Allocation

Storage AllocationDocuments 64% · Photos 23% · Free 13%
  • conic-gradient
  • figcaption
  • multi-segment

A 3-segment donut shows how a quota is split. The legend mirrors each slice in plain text so the breakdown survives without color or geometry.

<figure>
  <div class="donut" aria-hidden="true"></div>
  <figcaption>
    <strong>Storage Allocation</strong>
    <span>Documents 64% · Photos 23%</span>
  </figcaption>
</figure>

.donut {
  --primary: 64;
  --secondary: 23;
  background: conic-gradient(
    #67e8f9 calc(var(--primary) * 1%),
    #a78bfa 0 calc((var(--primary) + var(--secondary)) * 1%),
    rgba(148, 163, 184, 0.18) 0
  );
  animation: donutSweep 2.40s ease-out both;
}

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