CSS Doughnut Chart2

by JeffC

HTML

<svg focusable="false" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" tabindex="-1" width="200" viewBox="0 0 100 100">
  <circle class="" cx="50" cy="50" r="40" stroke-dasharray="35 100" stroke="#ff0000" stroke-width="16" fill="none" pathLength="100" transform="rotate(-90 50 50)"/>
  <circle class="" cx="50" cy="50" r="40" stroke-dasharray="70 35" stroke="#00ff00" stroke-width="16" fill="none" pathLength="100" transform="rotate(-90 50 50)"/>
  <text aria-hidden="true" tabindex="-1" x="50" y="50">Test</text>
</svg>


<svg focusable="false" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" tabindex="-1" width="200" viewBox="0 0 100 100">
  <circle class="bar" cx="50" cy="50" r="40" stroke="#00ACC8" stroke-width="16" fill="none" pathLength="100" transform="rotate(-90 50 50)"/>
  <circle cx="50" cy="50" r="48" stroke="rgb(139, 138, 175)" stroke-width="1" fill="none" />
  <circle cx="50" cy="50" r="32" stroke="rgb(139, 138, 175)" stroke-width="1" fill="none" />
  <text aria-hidden="true" tabindex="-1" x="50" y="50">0</text>
</svg>

<svg focusable="false" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" tabindex="-1" width="200" viewBox="0 0 100 100">
  <circle class="bar p25" cx="50" cy="50" r="40" stroke="#ff0000" stroke-width="16" fill="none" pathLength="100" transform="rotate(-90 50 50)"/>
  <circle cx="50" cy="50" r="48" stroke="rgb(139, 138, 175)" stroke-width="1" fill="none" />
  <circle cx="50" cy="50" r="32" stroke="rgb(139, 138, 175)" stroke-width="1" fill="none" />
  <text aria-hidden="true" tabindex="-1" x="50" y="50">25</text>
</svg>

<svg focusable="false" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" tabindex="-1" width="200" viewBox="0 0 100 100">
  <circle class="bar p33" cx="50" cy="50" r="40" stroke="#00ACC8" stroke-width="16" fill="none" pathLength="100" transform="rotate(-90 50 50)"/>
  <circle cx="50" cy="50" r="48" stroke="rgb(139, 138, 175)" stroke-width="1" fill="none" />
  <circle cx="50" cy="50" r="32" stroke="rgb(139,...

CSS

text {
  text-anchor: middle;
  dominant-baseline: middle;
  font-weight: bold;
  font-size: 30px;
  fill: rgb(70, 112, 125);
}

circle.bar {
  stroke-dasharray: 0 100;
}

circle.p25 {
  stroke-dasharray: 25 100;
}

circle.p33 {
  stroke-dasharray: 33 100;
}

circle.p50 {
  stroke-dasharray: 50 100;
}