circle percentage css

1<div class="flex-wrapper">
2  <div class="single-chart">
3    <svg viewbox="0 0 36 36" class="circular-chart orange">
4      <path class="circle-bg"
5        d="M18 2.0845
6          a 15.9155 15.9155 0 0 1 0 31.831
7          a 15.9155 15.9155 0 0 1 0 -31.831"
8      />
9      <path class="circle"
10        stroke-dasharray="70, 100"
11        d="M18 2.0845
12          a 15.9155 15.9155 0 0 1 0 31.831
13          a 15.9155 15.9155 0 0 1 0 -31.831"
14      />
15      <text x="18" y="20.35" class="percentage">30%</text>
16    </svg>
17  </div>
18  
19  <div class="single-chart">
20    <svg viewbox="0 0 36 36" class="circular-chart green">
21      <path class="circle-bg"
22        d="M18 2.0845
23          a 15.9155 15.9155 0 0 1 0 31.831
24          a 15.9155 15.9155 0 0 1 0 -31.831"
25      />
26      <path class="circle"
27        stroke-dasharray="60, 100"
28        d="M18 2.0845
29          a 15.9155 15.9155 0 0 1 0 31.831
30          a 15.9155 15.9155 0 0 1 0 -31.831"
31      />
32      <text x="18" y="20.35" class="percentage">60%</text>
33    </svg>
34  </div>
35
36  <div class="single-chart">
37    <svg viewbox="0 0 36 36" class="circular-chart blue">
38      <path class="circle-bg"
39        d="M18 2.0845
40          a 15.9155 15.9155 0 0 1 0 31.831
41          a 15.9155 15.9155 0 0 1 0 -31.831"
42      />
43      <path class="circle"
44        stroke-dasharray="90, 100"
45        d="M18 2.0845
46          a 15.9155 15.9155 0 0 1 0 31.831
47          a 15.9155 15.9155 0 0 1 0 -31.831"
48      />
49      <text x="18" y="20.35" class="percentage">90%</text>
50    </svg>
51  </div>
52</div>