Draw circle on hover

svg magic

HTML

<div>
<svg width="100px" height="100px" viewBox="0 0 100 100">
  <circle class="anicircle" cx="50" cy="50" r="40"/>
</svg>
</div>

CSS

.anicircle {
  fill: none;
  stroke-width: 5px;
  stroke: black;
  stroke-dasharray: 300 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 50ms linear;
}
svg:hover .anicircle {
  stroke-dashoffset: 0;
}