15. doughnut chart

  - accepted / - tried

Let's create a doughnut chart in CSS.

  1. radius: 50px
  2. thickness: 10px
  3. color: #f44336

The percentage should be able to set by CSS variable --percentage.

For example, to create a doughnut chart with 20%:

<div class="piechart" style="--percentage:20%"></div>

A doughnut chart with 75%:

<div class="piechart" style="--percentage:75%"></div>

1.percentage: 20%

2.percentage: 75%

3.percentage: 100%

(13)