[рони]

fori,
svg:hover .myCircle

<svg width="220" height="220" padding="0">
<circle class="myCircle"/>
</svg>
    <style>
    .myCircle {
    margin:0;
    cx:110;
cy:110;
r:100;
transform-origin: center;
transform: rotate(-60deg);
    fill: none;
    stroke: #333;
    stroke-width: 20;
    stroke-dasharray: calc(2*3.14*100/3) calc(2*3.14*100*2 /3);
    transition: 1s;
}
svg:hover .myCircle{
stroke-dashoffset: calc(2*3.14*100/3);
stroke-dasharray: 0 calc(2*3.14*100);
}
    </style>