JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="90" height="90">
      <circle class="outer" cx="43" cy="43" r="40"/>
    </svg>

CSS

.outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 3;
  stroke-dasharray: 204;
  stroke-dashoffset:1;
  transition: stroke-dashoffset 0.8s;
}

svg:hover .outer {
  stroke-dashoffset: 204 !important;
}