<div class="wrapper">
	
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>

	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>

	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>

	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>	
	
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>

</div>

html {
  box-sizing: border-box;
	cursor: url('https://i.ibb.co/6bycCv7/Ellipse-4.png'), default;	
}

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
	background-color: #030302;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
	display: grid;
	grid-template-columns: repeat(9, 40px);
	grid-template-rows: repeat(7, 40px);
	grid-gap: 1.5rem;
	
	.item { background-color: #FECE00; }
}

document.addEventListener('mousemove', (e) => {	
	const sqrs = document.querySelectorAll('.item');
		
	const mouseX = e.pageX;
	const mouseY = e.pageY;
	
	sqrs.forEach(sqr => {
		const sqrX = sqr.offsetLeft + 20;
		const sqrY = sqr.offsetTop + 20;

		const diffX = mouseX - sqrX;
		const diffY = mouseY - sqrY;
		
		const radians = Math.atan2(diffY, diffX);
				
		const angle = radians * 180 / Math.PI;
		
		sqr.style.transform = `rotate(${angle}deg)`;
	})
	
})