// hay dos formas de hacer: 1(variables css y .setProperty para modificar las propiedades); y 2(usando vien `` y clipPath=`circle()`). 1) //solo agregamos correcatamente objeto.style.clipPath = `circle(50px at $(x) $(y))`; siendo x,y //variables de la función que gracias a `` se podran incluir. 2) //javascript let img1 = document.querySelector(".img1"); const t = img1.getBoundingClientRect(); function moverCursor(e){ let m = e.pageX - t.left ; let n = e.pageY - t.top ; img1.style.setProperty(`--x`,`${m}px`); img1.style.setProperty(`--y`,`${n}px`); } img1.addEventListener("mousemove", moverCursor); //css .box { width: 500px; height: 250px; border: 2px solid red; position: relative; } .img1 { width: 450px; height: 240px; background-color: purple; --x: 0px; --y: 0px; --r: 50px; clip-path: circle(var(--r) at var(--x) var(--y)); } //html <div class="box"> <div class="img1">Hello word, hola mundo<br>Hello word, hola mundo<br>Hello word, hola mundo</div> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter