sharjeel619/index.html

## index.html
<html>
  <head>
    <style>
      body {
        background: #111;
        cursor: none;
      }
      .cursor {
        width: 30px;
        height: 30px;
        border: 1.5px solid #fff;
        z-index: 999;
        border-radius: 50%;
        position: absolute;
        transition: .15s all ease-out;
        pointer-events: none;
      }
      .cursor::after {
        content: "";
        position: absolute;
        width: 2px;
        height: 2px;
        background-color: #fff;
        left: 13.7px;
        top: 13.5px;
      }
    </style>
  </head>
  <body>
    <div class="cursor"></div>
    <script>
      const elem = document.querySelector(".cursor");
      document.addEventListener("mousemove", (e) => {
        elem.setAttribute("style", `-webkit-transform: translate(${e.pageX}px, ${e.pageY}px); transform: translate(${e.pageX}px, ${e.pageY}px);`);
      });
    </script>
  </body>
</html>
	<html>
	<head>
	<style>
	body {
	background: #111;
	cursor: none;
	}
	.cursor {
	width: 30px;
	height: 30px;
	border: 1.5px solid #fff;
	z-index: 999;
	border-radius: 50%;
	position: absolute;
	transition: .15s all ease-out;
	pointer-events: none;
	}
	.cursor::after {
	content: "";
	position: absolute;
	width: 2px;
	height: 2px;
	background-color: #fff;
	left: 13.7px;
	top: 13.5px;
	}
	</style>
	</head>
	<body>
	<div class="cursor"></div>
	<script>
	const elem = document.querySelector(".cursor");
	document.addEventListener("mousemove", (e) => {
	elem.setAttribute("style", `-webkit-transform: translate(${e.pageX}px, ${e.pageY}px); transform: translate(${e.pageX}px, ${e.pageY}px);`);
	});
	</script>
	</body>
	</html>