<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid ducimus ex doloremque ut voluptates vitae necessitatibus corrupti velit, rem veritatis perferendis beatae fugiat eum voluptatum. Exercitationem dolorem maxime nam veniam!</p>
body {
  font-size: 50px;
  font-weight: bold;
  background-color: #fff;
  cursor: none;
}

.pointer {
  background-color: #fff;
  position: fixed;
  text-align: center;
  width: 80px;
  height: 80px;
  z-index: 1000;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: difference;
  overflow: hidden;
  border-radius: 50%;
}
$( "body" ).append('<div class="pointer"></div>');


$( "body" ).on("mousemove", function(e) {
    $(".pointer").css({"top":e.clientY + 'px', "left": e.clientX + 'px'})
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js