Invertir el color del texto en el cursor del mouse

Me gustaría invertir un texto negro mientras lo desplazo con un cursor personalizado (negro). Este GIF demuestra el efecto:

No pude envolver mi cabeza para hacer que esto funcione con CSS y JS. Alguna combinación con modos de mezcla-mezcla, máscaras de recorte, pseudo-elementos y filtros, supongo.

El siguiente código hace que el cursor sea blanco, pero no permite que el texto negro se vuelva blanco. ¿Suena abstracto? Aquí hay una demo .

mix-blend-mode: difference; filter: invert(1) grayscale(1) contrast(2); 

He configurado un patio de recreo en Codepen para que juegue un poco , pero aún no he encontrado una solución.

¿Cómo podría este efecto de hover ser recreado con CSS y Javascript?

Aquí hay una idea usando el clip-path . El truco consiste en duplicar el texto para tener dos capas una encima de la otra con un color de texto diferente, luego revelo la superior con la clip-path que ajuste con el movimiento del mouse.

 var h =document.querySelector('h1'); var p= h.getBoundingClientRect(); var c= document.querySelector('.cursor'); document.body.onmousemove = function(e) { /*Adjust the cursor position*/ c.style.left=e.clientX-20+'px'; c.style.top=e.clientY-20+'px'; /*Adjust the clip-path*/ h.style.setProperty('--x',(e.clientX-p.top)+'px'); h.style.setProperty('--y',(e.clientY-p.left)+'px'); } 
 body { cursor:none; } h1 { color: #000; display:inline-block; margin:50px; text-align: center; position:relative; } h1:before { position:absolute; content:attr(data-text); color:#fff; background:#000; clip-path: circle(20px at var(--x,-40px) var(--y,-40px)); } .cursor { position:absolute; width:40px; height:40px; background:#000; border-radius:50%; top:-40px; left:-40px; z-index:-2; } 
 

WORK