The Missing Slice
summary
Compares concrete implementations: a skewed pseudo‑element hack that breaks at 50% and needs multiple edits; an improved rotated pseudo with an animation‑delay “static interpolation” trick to set any percentage by one inline property; an explicit SVG stroke-dasharray solution using viewBox 64 and radius 25% whose dash length maps to the circumference so values correspond to 0–100%, supports multiple segments and smooth animation; and the simplest conic-gradient one‑liner that works great where browser support is available — a polyfill on GitHub exists.
AI-written summary · about
chapters (7)
- 0:00Start
- 6:04Flexibility
- 7:50Maintainability
- 8:55Extensibility
- 9:41Skewed pseudo-element
- 26:03Rotated pseudo-element
- 41:18A table is nearly always better than a dumb pie chart; the only worse design than a pie chart is several of them, for then the viewer is asked to compare quantities located in spatial disarray both within and
related talks
01h 01mThe missing slice (Keynote)
59mThe web design cheat code: Using SVG to bridge CSS’ gaps
34mThe svg of .svg
31mSurprise and delight: CSS + SVG
01h 09mEven More CSS Secrets
39mStyling and Animating Scalable Vector Graphics with CSS
29mStyling and Animating Scalable Vector Graphics with CSS
49mSVG in motion