[рони]

fori,

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