The missing slice (Keynote)
summary
Claim: pie charts are deceptively tricky in CSS but solvable with concrete techniques. Demonstrations show a brittle skewed pseudo-element hack that breaks near 90° and even crashes Chrome, a smarter animation-delay hack to sample keyframes statically, a clean SVG approach using stroke-dasharray with a 64 viewBox so circumference maps to 100, and modern conic gradients (polyfilled via canvas) that yield compact, animatable pies. Built examples animate and compose segments; SVG and conic gradients are the practical winners.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 1:28The difficulty of pie charts
- 3:06Skew transform method
- 6:45Criteria for good solutions
- 9:41Revisiting the skew method
- 13:30Rotation and masking method
- 19:24Animating the pie charts
- 23:03Static interpolation trick
- 28:54Critique of rotation method
- 34:21SVG stroke-dasharray
- 42:09SVG multi-segment charts
- 45:08Conic gradients
- 47:43Browser advocacy
- 49:03Visualization best practices
- 51:21Q&A and concluding thoughts
related talks
47mThe Missing Slice
43mThe Missing Slice
26mCSS animation Today (2021 Edition)
31mSurprise and delight: CSS + SVG
01h 02mKeynote. New Adventures in Front-End, Season 2
59mThe web design cheat code: Using SVG to bridge CSS’ gaps
29mSVGs beyond mere shapes
29mStyling and Animating Scalable Vector Graphics with CSS