[fori]

Спасибо, позвольте спросить, насколько правильный подход у создании такой анимации у мненя, или можно было выбрать лучшый подход

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