Cursor Pointer

	<!DOCTYPE html>
	<html>
	<head>
	<title>Curser Pointer</title>
	</head>
	<body>

	<h2>Follow The Coursor \| JavaScript</h2>
	<div id="cursor"></div>

	</body>
	</html>

	<style type="text/css">
	body{margin: 0px; padding: 0px; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: sans-serif; overflow: hidden; cursor: none;}
	#cursor{
	position: absolute;
	width: 20px;
	height: 20px;
	border: 2px solid #000;
	box-sizing: border-box;
	transition: 0.1s;
	transform: translate(-50% -50%);
	border-radius: 50%;
	pointer-events: none;
	}
	h2:hover ~ #cursor{width: 100px; height: 100px; border: 2px dashed #000; animation: animate 5s linear infinite;}

	@keyframes animate{
	0%{transform: translate(-50%,-50%) rotate(0deg);}
	100%{transform: translate(-50%,-50%) rotate(360deg);}
	}
	</style>


	<script type="text/javascript">
	var cursor = document.getElementById('cursor');
	document.addEventListener('mousemove', function (e){
	var x = e.clientX;
	var y = e.clientY;
	cursor.style.left = x + "px";
	cursor.style.top = y + "px";

	// body...
	});
	</script>

Code Design html