JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="stroked-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <circle class="circle" cx="150" cy="150" r="150"/>
</svg>

CSS

#stroked-circle {
  display: block;
  overflow: visible;
  width: 50%;
  margin: 50px auto;
  transform: rotate(-90deg);
}

.circle {
  fill: none;
  stroke: red;
  stroke-width: 10px;
  stroke-dasharray: 942.1;
  stroke-dashoffset: 942.1;
  transition: stroke-dashoffset 1s linear;
}

#stroked-circle:hover .circle {
  stroke-dashoffset: 0;
}