He estado pensando en este tipo de cosas en los últimos días. Si puedo hacer el text-fill-color dentro del texto. Me gusta este enlace . Lo que está tratando de hacer es cuando lo pasas por encima... llenará el color del texto con azul, pero lo que quiero que suceda es como... Puedo poner cualquier forma dentro del texto porque he visto algunos proyectos que se ven gusta. Tengo código de muestra aquí
let mouseCursor = document.querySelector('.cursor') window.addEventListener("mousemove", cursor) function cursor(e) { mouseCursor.style.top = e.pageY + "px"; mouseCursor.style.left = e.pageX + "px" } < /script> *, *::after, *::before { margin: 0; padding: 0; } body { width: 100%; height: 100vh; background: black; display: flex; align-items: center; justify-content: center; } .text { margin: 0 auto; } .text h1 { color: orange; } .text h2 { font-size: 125px; background: radial-gradient( red 20%, orange 60%, red 20%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* background-size: 100%; background-position: 50%; */ } .cursor { width: 2rem; height: 2rem; border: 2px solid gray; background: rgb(20, 192, 97); border-radius: 50%; z-index: 0; position: absolute; transform: translate(-50%, -50%); position: none; transition: all 0.5 ease; transition-property: background, transform; } <div class="cursor"></div> <div class="text"> <h1> HELLO WORLD </h1> <h2> HELLO WORLD </h2> </div>Como puede ver adentro, hay como un círculo adentro, pero es solo un círculo para un degradado, pero quiero el cursor de mi mouse o tal vez quiero poner un círculo adentro sin usar el color degradado dentro del texto. Si es posible, necesito una mínima pista o algo más. Necesito ayuda sobre aquí será un gran agradecimiento :)