JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<svg width="40px" width="40px" viewBox="0 0 40 40" version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <circle id="border" cx="20" cy="20" r="18"/>
  <circle id="fill" cx="20" cy="20" r="18"/>
  <text x="12" y="25" class="small">01</text>
</svg>
<svg width="40px" width="40px" viewBox="0 0 40 40" version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <circle id="border" cx="20" cy="20" r="18"/>
  <circle id="fill" cx="20" cy="20" r="18"/>
  <text x="12" y="25" class="small">02</text>
</svg>
<svg width="40px" width="40px" viewBox="0 0 40 40" version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <circle id="border" cx="20" cy="20" r="18"/>
  <circle id="fill" cx="20" cy="20" r="18"/>
  <text x="12" y="25" class="small">03</text>
</svg>
<svg width="40px" width="40px" viewBox="0 0 40 40" version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <circle id="border" cx="20" cy="20" r="18"/>
  <circle id="fill" cx="20" cy="20" r="18"/>
  <text x="12" y="25" class="small">04</text>
</svg>

CSS

#border {
  fill: transparent;
  stroke: #ccc;
  stroke-width: 2px;
}
#fill {
  fill: transparent;
  stroke: #000;
  stroke-width: 2px;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: .5s ease
}

svg:hover #fill {
    stroke-dashoffset: 1;
}