26% slice
20% slice
16% slice
14% slice
12% slice
8% slice
6% slice
A very simple method of producing an animated pie chart using clip-path: shape and a couple of inline styles.
All you need to do is set up two variables for the slices using the accumulated percentages for each slice. The information is in the html code.
The stylesheet will then do all the calculations to position the slices and set the directions for animating each one on hover/tap.
Each slice has a background shadow using filter: drop-shadow on the containing <div class="pie">.
You can have as many sectors as you want without any changes to the stylesheet.
This works in all the latest browsers and is responsive.