Pie Chart Reveal
SVG pie chart with a legend: when it comes into view, each slice starts at the top of the disc and glides to its place while widening, one after the other.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Data has 28 effects, including 1 free. Explore the category →
3 usage examples
How it works
The .fx-0227-root root holds an empty .pcs-pie slot and a ul.pcs-legend list. Each li in the list is a slice: its text is the label, its data-value attribute the amount. The script adds up the total and gives every slice a proportional angle, so the disc is always 100% full, whatever the units (euros, grams, minutes).
The drawing is a 120-unit SVG, turned a quarter turn so it starts at the top: one circle per slice, radius 30 and stroke width 60, which makes a solid disc. Each stroke's length (stroke-dasharray) is its share of the circumference and its offset (stroke-dashoffset) is where it starts. In the legend the script adds a colour swatch and the percentage, written in the page language's format (“38%” in English, “38 %” in French).
At first every slice has zero length. As soon as 35% of the disc is visible, the pcs-on class gives each circle its final length and offset, with a 1 s transition (ease-out) delayed by 0.2 s and 0.2 s more per slice. This only happens once. The disc measures --pcs-size (180 px) without ever exceeding the container width; when space runs out, the legend moves below the disc.
Accessibility
- The legend is the chart's text: a real list named by its
aria-label, each item read as “Yes 30%”. The SVG is hidden from screen readers so the information is not repeated. - Hidden legend: with
data-legend="hidden", the list disappears from the screen but is still read out; give the colours another visual key then (such as the swatches of a player list). - Reduced motion: under
prefers-reduced-motion: reduce, the transition is removed and the full pie shows at once. - No interaction: nothing takes focus, nothing reacts to hover or touch. Six colours follow each other then repeat: beyond six slices, tell them apart through the legend.
Browser compatibility
SVG created by the script, CSS transitions on stroke-dasharray and stroke-dashoffset, aspect-ratio, IntersectionObserver and Intl.NumberFormat. Measured on 8 Nov 2026 in Chromium 151, Firefox 153 and WebKit 26.5 (Playwright): correct slices (30/25/20/25 → 100%), two independent copies, reduced motion, 390 px wide, no errors.
Without IntersectionObserver, the pie reveals itself on load. Without JavaScript only the list of labels shows, with no disc and no percentages.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0227-root">
<div class="pcs-pie"></div>
<ul class="pcs-legend" aria-label="Survey answers">
<li data-value="30">Yes</li>
<li data-value="25">Rather yes</li>
<li data-value="20">Rather no</li>
<li data-value="25">No</li>
</ul>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Slices (HTML — one li data-value="…" per slice in .pcs-legend) |
Yes 30, Rather yes 25, Rather no 20, No 25 | The li text is the label; values can be in any unit, the script turns them into shares of the total. |
List name (HTML — aria-label of .pcs-legend) |
“Survey answers” | Announced by screen readers before the slices: describe what the chart shows. |
Visible legend (HTML — data-legend="hidden" on the root) |
Legend shown | Hides the legend on screen while keeping it readable by screen readers. |
Colours (CSS — --pcs-c1 to --pcs-c6) |
#6366f1, #8b5cf6, #d946ef, #ec4899, #f43f5e, #06b6d4 | One colour per slice, in list order; the legend swatches follow. |
Size (CSS — --pcs-size, --pcs-min-height) |
180 px, 300 px | Maximum disc diameter (never wider than the container) and minimum root height. |
Background and text (CSS — --pcs-bg, --pcs-text, --pcs-muted) |
#0a0a0f, 80% white, 50% white | Root background, colour of the labels and of the percentages. |
FAQ
flex-direction: column on .fx-0227-root in your CSS.
