Loading…
Live block · try it
Freestats · dark · scroll · hover · svg
Concentric Ring Stats
Four quarterly goals as concentric rings that close one after another when the block appears, a completed ring glowing at its cap; hover a ring or its legend line and the others fade while the centre swaps to that goal's number.
The mechanic
`pathLength="100"` on every arc makes the value the dash offset directly (`stroke-dashoffset: calc(100 − var(--v))`), rings start at 12 o'clock via `rotate(-90)`, and a CSS `:has()`-free hover sync uses one `data-on` attribute on the block so ring and legend state never disagree.
How to use it
From prompt to a block in your page.
- 01Try the block
The preview is the shipped block inside a neutral demo page. Scroll, hover, drag: everything is live.
- 02Pick a palette
Token sets re-tint the block live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the block's markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Drop it into your page
Add the head lines it names, paste the block, replace the placeholder copy. Tokens live on :root.
