JSFiddle - React, Tailwind, and code Playground

by philippkuehn

HTML

<svg class="chart" width="200px" height="200px" viewBox="0 0 200 200">
    <g transform="rotate(45 100 100)">
        <path class="bar" d="M 100 177.5 A 77.5 77.5 0 0 1 73.49343889226067 172.8261781109079"></path>
        <path class="bar" d="M 210 181.5 A 77.5 77.5 0 0 1 73.49343889226067 172.8261781109079"></path>
    </g>
</svg>

CSS

g {
    -webkit-transition: -webkit-transform 1s;
}

.chart {
  display: block;
  width: 200px;
  height: 200px;
  background: #ededed;
}

.background,
.bar {
  fill: none;  
  stroke-width: 25px;
}

.background {
  stroke: black;
}

.bar {
  stroke: #1fbba6;
}