Similar to the previous demonstration but using the latest css style 'border-shape' which allows the border color of each sector to be easily styled.

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.

You can have as many sectors as you want without any changes to the stylesheet.