<h3>Animates on hover (JS)</h3>

<div  id="chart"></div>
#chart{
	width: 300px; 
	height: 300px;
	margin: calc(50vh - 150px) auto auto auto;
	--n: 30%;
	background: 
	    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='300px'><body style='margin:0;text-align:center;color:transparent;' xmlns='http://www.w3.org/1999/xhtml'><div style='text-shadow: 0 0 limegreen;font:200px/300px serif;background:white;'>🍏</div><div style='text-shadow:0 0 white;font:170px/300px serif;position:relative;top:-300px;'>🍏</div></body></foreignObject></svg>"),
	    conic-gradient(transparent var(--n), darkseagreen var(--n));
	background-blend-mode: screen;
}

h3{ 
	text-align: center; 
	position: absolute; 
	margin: auto; 
	left: 0;
	right: 0;
	font-family: cochin;
	font-size: 13pt;
	width: 300px;
	text-decoration: solid lime underline;
	-webkit-text-decoration: solid lime underline;
}

body{
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}
const chart = document.querySelector('#chart')

chart.onpointerover = ()=>{
	var i = 30,
	    timer = setInterval(()=> {
		if (i < 70)
		  chart.style.setProperty('--n', i++ + '%')
		 else clearInterval(timer)
		}, 10)
}


chart.onpointerout = ()=>{
	var i = 70,
	    timer = setInterval(()=> {
		if (i >= 30) 
			chart.style.setProperty('--n', i-- + '%')
		 else clearInterval(timer)
		}, 10)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.