JSFiddle - React, Tailwind, and code Playground

by ninachroscicka

HTML

<svg width="200" height="200">
  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#ffa5ab"/>
      <stop offset="100%" stop-color="#a53860"/>
    </linearGradient>
  </defs>
  <circle cx="100" cy="100" r="75" stroke="#EFF0F1" stroke-width="25" fill="transparent"/>
  <path d="M 100, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0" stroke="url(#linear)" stroke-linecap="round" stroke-width="25" fill="transparent"  stroke-dasharray="471.2" class="circle-fill"/>
  <text fill="#a9a9a9" font-size="20" font-family="Verdana" x="100" y="100">
  <tspan text-anchor="middle"> Wysoki </tspan></text>
  <text fill="#a9a9a9" font-size="15" font-family="Verdana" x="100" y="100">
  <tspan text-anchor="middle" y="125">0.88</tspan>
  </text>

</svg>

CSS

svg .circle-fill {
  stroke-dasharray: 471.2;
  stroke-dashoffset: 471.2;
  animation: dash 5s forwards ease;
}
@keyframes dash {
  to {
      stroke-dashoffset: 37;
  }
}