<div class="page">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.28 570">
   <g clip-path="url(#clip-cursor)">
      <image height="100%" width="100%"  xlink:href="https://itsashapechristmas.co.uk/uploads/images/2048x2048-V1.jpg"  class="cursor-follow" />
    </g>
    <clippath id="clip-cursor">
      <circle cx="297" cy="285" r="150" class="cursor-circle">
    </clippath>
  </svg>
</div>
.page {
  width: 100vw;
  height: 100vh;
}

svg {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
$(document)
  .ready(

  function() {
    
    $('.page')
      .mousemove(

        function(event) {

          console.log('ergiuherg');
          
          // Get central coordinates of slide mask

                var objLeft = $('.page').offset().left,
                  objTop = $('.page').offset().top,
              objCenterX = objLeft + $('.page').width() / 2,
              objCenterY = objTop + $('.page').height() / 2;

          // Circle Coordinates 
          
            var y = event.pageY - objCenterY + 285,
                x = event.pageX - objCenterX + 297;

           $('.cursor-circle')
                .attr('cx', x)
                .attr('cy', y);

              // Image Coordinates

                var imageY = (event.pageY - objCenterY) * 0.03,
                  imageX = (event.pageX - objCenterX) * 0.03;

                 $('.cursor-follow')
                  .attr('x', imageX)
                  .attr('y', imageY);

          }

        );	
    
  }
  
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-3.1.1.min.js