<div class="cursor rounded"></div>
<div class="cursor pointed"><div>
  

  

  
  
body{
  background-color: #1D1E22;
  cursor: none;
  height: 150vh;
}
.rounded{
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
}
.pointed{
  width: 7px;
  height: 7px;
  background-color: white;
  border-radius: 50%;
  margin-bottom: 20rem;
}
View Compiled
const cursorRounded = document.querySelector('.rounded');
const cursorPointed = document.querySelector('.pointed');


const moveCursor = (e)=> {
  const mouseY = e.clientY;
  const mouseX = e.clientX;
   
  cursorRounded.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
  
  cursorPointed.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
 
}

window.addEventListener('mousemove', moveCursor)
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.