Circle Cursor with Color Invert

Javascript — Advanced Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>

<script>
  $( ( ) => {
    $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );
    $( window ).mousemove ( function ( e ) {
      $( '.cursor' ).css ( {
        left: e.pageX,
        top: e.pageY
        } );
      } );
      
    $( window ).mousemove ( function ( e ) {
      $( 'a' ).on ( 'mouseenter', function ( ) {
        $( '.cursor' ).addClass ( 'active' );
        } );
      } );
      
    $( window ).mousemove ( function ( e ) {
      $( 'a' ).on ( 'mouseleave', function ( ) {
        $( '.cursor' ).removeClass ( 'active' );
        } );
      } );
    } ); 
  </script>

Custom CSS

/* CURSOR */
@media ( hover: none ) {
  .cursor {
    display: none !important;
    }
  }

* {
  cursor: none;
  }

.cursor {
  --size: 10px;
  
  height: var( --size );
  width: var( --size );
  
  border-radius: 50%;
  pointer-events: none;
  position: absolute;
  transform: translate( -50%, -50% );
  z-index: 99999999999;
  
  }

.cursor.cursor-dot {
  background: #ffffff; /* This defines the color of the cursor */
  mix-blend-mode: difference; /* This line is for the circle to invert Delete this line if you dont want the circle to invert */
  transition: width 0.7s, height 0.8s, background-color 0.9s;
  transition-timing-function: ease-out;
  }

.cursor-dot.active {
  --size: 40px;
  background-color: #ffffff;
  }