Astackr círculos produce una barra negra en el radio del borde

Tengo toda la empresa desconcertante aquí.

Estoy construyendo un ratón que sirve como ‘linterna / reflector’. Todo el texto (elementos en línea, botones, obtienes el punto) se invierte del blanco habitual al negro si se produce un desplazamiento, el fondo normal es una vibra amarilla.

Actualmente tengo la siguiente configuración:

const _$shadow = $('.b-cursor__shadow'); const _$front = $('.b-cursor__front'); const _$back = $('.b-cursor__back'); $(document).on('mousemove', (e) => { _$back.css({ left: e.pageX, top: e.pageY }); _$front.css({ left: e.pageX, top: e.pageY }); _$shadow.css({ left: e.pageX, top: e.pageY }); }); 
 html, body { padding: 0; margin: 0; cursor: none; background: red; } .test { background: darkblue; } p { color: white; font-family: sans-serif; font-size: 20px; max-width: 30rem; padding: 1rem; margin: 1rem; border: 1px solid white; } p, span, a { position: relative; z-index: 105; } .b-cursor__back, .b-cursor__front, .b-cursor__shadow { position: fixed; width: 8rem; height: 8rem; margin-left: -4rem; margin-top: -4rem; border-radius: 50%; } .b-cursor__shadow { box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1); } /* background changes */ .b-cursor__back { z-index: 104; background: #18173e; clip-path: circle(50% at 50% 50%); } .b-cursor__front { z-index: 106; background: white; clip-path: circle(50% at 50% 50%); mix-blend-mode: difference; } 
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.

ja uh misschien werkt dit wel niet

( codepen )

Esto produce casi el resultado deseado, excepto el border-radius: 50% no maneja correctamente los divs de astackmiento semi agradables. Pixel dtwig! Imagen para aclarar:

Captura de pantalla

Pregunta: ¿Cómo puedo eliminar el borde negro creado al astackr estos dos elementos con el mismo tamaño y preservar el efecto actual en el texto?

Simplemente agregaría otro elemento arriba usando un pseudo elemento para ocultar ese pequeño borde y simplificar el código moviendo el contenedor en lugar de cada elemento. Tampoco hay necesidad de la clip-path del clip-path

 const _$cursor = $('.b-cursor'); $(document).on('mousemove', (e) => { _$cursor.css({ left: e.pageX, top: e.pageY }); }); 
 html, body { padding: 0; margin: 0; cursor: none; background: red; } .test { background: darkblue; } p { color: white; font-family: sans-serif; font-size: 20px; max-width: 30rem; padding: 1rem; margin: 1rem; border: 1px solid white; } p, span, a { position: relative; z-index: 105; } .b-cursor { /*no z-index here !!!*/ position: absolute; width: 8rem; height: 8rem; margin-left: -4rem; margin-top: -4rem; } /*the magic element*/ .b-cursor:before { content:""; position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; border:2px solid rgba(231, 232, 192, 1); border-radius:50%; z-index:999; } /**/ .b-cursor__back, .b-cursor__front, .b-cursor__shadow { position:absolute; top:0; left:0; width:100%; height:100%; border-radius: 50%; } .b-cursor__shadow { box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1); } /* background changes */ .b-cursor__back { z-index: 104; background: #18173e; } .b-cursor__front { z-index: 106; background: white; mix-blend-mode: difference; } 
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.

ja uh misschien werkt dit wel niet

Esto podría funcionar para sus necesidades.

 const _$shadow = $('.b-cursor__shadow'); const _$front = $('.b-cursor__front'); const _$back = $('.b-cursor__back'); $(document).on('mousemove', (e) => { _$back.css({ left: e.pageX, top: e.pageY }); _$front.css({ left: e.pageX, top: e.pageY }); _$shadow.css({ left: e.pageX, top: e.pageY }); }); 
 html, body { padding: 0; margin: 0; cursor: none; background: red; } .test { background: darkblue; } p { color: white; font-family: sans-serif; font-size: 20px; max-width: 30rem; padding: 1rem; margin: 1rem; border: 1px solid white; } p, span, a { position: relative; z-index: 105; } .b-cursor__shadow2, .b-cursor__back, .b-cursor__front, .b-cursor__shadow { position: fixed; width: 8rem; height: 8rem; margin-left: -4rem; margin-top: -4rem; border-radius: 50%; } .b-cursor__shadow { box-shadow: 0px 0px 10px 20px rgba(231, 232, 192, 1); z-index: 107; height: 8rem; width: 8rem; } .b-cursor__shadow2 { background: radial-gradient(circle at center, #18173e 100%, #18173e 25%); z-index: 109; height: 8rem; width: 8rem; background-color: transparent; } /* background changes */ .b-cursor__back { z-index: 104; height: 8rem; width: 8rem; background: radial-gradient(circle at center, #18173e 100%, #18173e 25%); background-size: 100% 100%; background-position: 50% 50%; } .b-cursor__back:after { width: 7rem; height: 7rem; content: ''; border-radius: 50%; background: transparent; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 0px 1rem #18173e; transition: all 0.3s linear; mix-blend-mode: normal; } .b-cursor__front { z-index: 106; height: 8rem; width: 8rem; background: white; background: radial-gradient(circle at center, #ffffff 100%, #ffffff 25%); background-position: 50% 50%; mix-blend-mode: difference; } .b-cursor__front:after { width: 7rem; height: 7rem; content: ''; border-radius: 50%; background: transparent; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 0px 1rem #ffffff; transition: all 0.3s linear; mix-blend-mode: normal; } 
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.

ja uh misschien werkt dit wel niet

intenta agregar

filter:blur(1.4px); /* or anywhere between 0.7px to 1.9px */

al círculo exterior o círculos internos. en tu CSS