JSFiddle - React, Tailwind, and code Playground

HTML

<div id="circle_hover"></div>

CSS

#circle_hover{
	position: relative;
	width: 160px;
	height: 160px;
}
circle {
  fill: rgba(0,0,0,0);
  stroke: #eee;
  stroke-width: 15;
  stroke-dasharray: 408px 408px;
}
circle:nth-child(2n) {
  fill: rgba(0,0,0,0);
  stroke: #30bae7;
  stroke-width: 15;
}

JavaScript

var timerfps;
var timersec;
var fps = 33.33;
var ipr = 0;
var timer = 3000;
var valEl = 0;
var circle_hover = document.getElementById('circle_hover');
		animate()
	function animate(){
	        circle_hover.innerHTML = '<svg width="153" height="153"><circle transform="rotate(-90)" r="65" cx="-80" cy="80" /><circle transform="rotate(-90)" style="stroke-dasharray:'+valEl+'px 408px;" r="65" cx="-80" cy="80" /></svg>';
	        		
	}

	function func(){
		ipr += 1;
		valEl = ipr*408/100;
		console.log(ipr);
    animate()
	}
	circle_hover.onmouseover = function() {
	    timerfps = setInterval(func, 1000/fps);
		timersec = setTimeout(function() {clearInterval(timerfps);}, timer);
	};

	circle_hover.onmouseout = function() {
		ipr = 0;
		clearTimeout(timersec);
		clearInterval(timerfps);
	};