* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.pointer {
  width: 20px;
  height: 20px;
  display: flex;
  background-color: #333;
  border-radius: 50%;
  transition: all .3s cubic-bezier(.24,.45,.32,1);
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
}

let moveArea = document.documentElement;
let target = document.querySelector('.pointer');
let elemData;

moveArea.addEventListener("mouseenter", e => {
  elemData = target.getBoundingClientRect();
})

moveArea.addEventListener("mousemove", e => {
  let transX = e.clientX - (elemData.width / 2);
  let transY = e.clientY - (elemData.height / 2);
  target.style.transform = "translate(" + transX + "px, " + transY + "px)";
})