0

as the title i'd like to have an a-href button with a trasparent text which allow to see behind the transparent text the animation in backgroun made with three js, is possible?

i tyied with


mix-blend-mode: screen;

in the css class for the a-ref, but don't seems to work since i don't have a backgroun image for the body from css like:

body {
  background: url(https://unsplash.it/1600?image=974) ;
}

but a threejs animation. The button is the one below in the picture and the text I need to be trasparent is 'WATCH WORK', the blue meshes in background are waving as a sin/cos function and are my animation in background. I'd like the 'WATCH WORK' text to be TRANSPARENT to see the ANIMATION behind it.

enter image description here

Thanks you if u can help!

Alessandro Zerbini
  • 11
  • 2
  • This should help you. https://stackoverflow.com/questions/13932946/transparent-text-cut-out-of-background – dantheman Feb 01 '23 at 08:32
  • thanks but this still use backgroun image in css: body { background: url(http://www.color-hex.com/palettes/26323.png) repeat; margin:10px; } span { background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat; -webkit-text-fill-color: transparent; -webkit-background-clip: text; display:block; } – Alessandro Zerbini Feb 01 '23 at 08:56
  • Look at the second answer using the SVG – dantheman Feb 01 '23 at 09:08
  • well i tried but when I try to apply it to my code don't work, the a href tag don't work inside the svg tag – Alessandro Zerbini Feb 01 '23 at 19:26

0 Answers0