<h3>Animates on hover (CSS <code><a href="https://caniuse.com/mdn-css_at-rules_property">@property</a></code>)</h3>

<div id="chart"></div>
@property --n {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 30%;
}

#chart{
	width: 300px; 
	height: 300px;
	margin: calc(50vh - 150px) auto auto auto;
	--n: 30%;  /*declaration for browsers with no @property support */
	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;
	transition: --n 2s ease-in-out
	
}

#chart:hover{ --n: 70%; }

h3{ 
	text-align: center; 
	position: absolute; 
	margin: auto; 
	left: 0;
	right: 0;
	font-family: Cochin;
	font-size: 13pt;
	width: 300px;
}

code{
	font-size: 12pt;
	font-weight: normal;
}

a:link{
	text-decoration: solid lime underline;
	-webkit-text-decoration: solid lime underline;
	color: black;
}

body{
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.