<figure>
<div class="circle">
	<div class="square"></div>
</div>
<figcaption>Move the cursor into the circle</figcaption>
</figure>

@property --p {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 0%;
}
.square {
	width: 30px; 
	aspect-ratio: 1;
	border-radius: 4px;
	box-shadow: inset 0 0 20px rgb(170 232 251), 0 0 3px #eee;
	offset: top 50% right 50% circle(50%) var(--p);
	transition: --p 1s linear;
}
.circle {
	width: 200px; 
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(-135deg, rgb(240 247 250) 30%, rgb(170 232 251));
	box-shadow: 0 0 3px #eee;
	margin: auto;
	&:hover .square{ --p: 100%; }
}
figcaption{
	text-align: center;
	margin-top: 30px;
}
body {
	/* for demo purpose */
	height: 100vh;
	margin: 0;
	display: grid;
	place-content: center;
	place-items: center;
	font: 14px 'poppins';
	user-select: none; -webkit-user-select:  none;
	cursor: default;
}