JSFiddle - React, Tailwind, and code Playground

by persianturtle

HTML

<svg width="200" height="200">
  <circle class="path" cx="100" cy="100" r="96" stroke="blue" stroke-width="4" fill="none" />
</svg>

CSS

svg {
  transform: rotate(-90deg);
}

.path {
  stroke-dasharray: 603.185;
  stroke-dashoffset: 603.185;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}

JavaScript

var path = document.querySelector('.path');
var radius = Number(path.attributes.r.value);
var circumreference = radius * 2 * Math.PI;
console.log(circumreference); // 603.185