Pie chart
A pie is a donut with the hole closed: each slice is an arc that reaches all the way to the center.
How it's built
- Five
<o-arc value>that add up to 100, stacked in DOM order on one ring. inner-orbitputs the outer edge of each arc onorbit-11, and--o-size-ratio: 11makes it eleven lanes thick: all the way in. Lower it to 6 and you have a donut of the same size.- A thin
--o-strokein the background color separates the slices instead of--o-gap, which would leave wedges that narrow to nothing at the center. interactivelets each slice take the pointer and focus. Orbit places arcs withrotate, so atranslateof yours adds to it: the slice in focus slides out along its middle.