I tried to blur the SVG clip-path .
I tried different solutions, but none of them helped.

I'm not sure if there is another solution besides the filter.

Pseudocode

  • SVG clip-path should reveal the text below.
  • The edges, if the SVG clip-path applied should be blurred

HTML

  .wrapper { display: flex; justify-content: center; align-items: center; position: relative; } .h1, blur { width: 100vw; height: 100vh; } .h1 { position: absolute; top: 0; left: 0; margin: 0; padding: 0; font-size: 4em; clip-path: url(#svgPath); background-color: blue; } .blur { position: absolute; top: 0; left: 0; margin: 0; padding: 0; font-size: 4em; color: blue; background-color: white; filter: blur(8px) } 
 <div class="wrapper"> <h1 class="blur"> Our principles inform everything we do. Whether you're preparing content, designing an interface or developing an entire service, start by reading these. </h1> <h1 class="h1"> Our principles inform everything we do. Whether you're preparing content, designing an interface or developing an entire service, start by reading these. </h1> </div> <svg id="googlesMain" height="0" width="0"> <defs> <filter id="f1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> </filter> </defs> <clipPath id="svgPath"> <circle id="clipPath" cx="250" cy="250" r="250"/> </clipPath> </svg>

1 answer 1

Well, here is a way to do this using radial-gradient() as mask-image .

 var h1 = document.getElementById('masked'); document.addEventListener('mousemove', mouseListen, false); function mouseListen(e){ setMaskPos(e.clientX,e.clientY); } function setMaskPos(x,y) { h1.setAttribute("style", "-webkit-mask-image: radial-gradient(circle at " + x + "px " + y + "px, black 0px, black 200px, transparent 250px)"); } // Initialise the mask off screen setMaskPos(-999,0); 
 .wrapper { display: flex; justify-content: center; align-items: center; position: relative; } .h1, blur { width: 100vw; height: 100vh; } .h1 { position: absolute; top: 0; left: 0; margin: 0; padding: 0; font-size: 4em; background-color: white; } .blur { position: absolute; top: 0; left: 0; margin: 0; padding: 0; font-size: 4em; background-color: white; filter: blur(8px) } 
 <div class="wrapper"> <h1 class="blur"> Our principles inform everything we do. Whether you're preparing content, designing an interface or developing an entire service, start by reading these. </h1> <h1 id="masked" class="h1"> Our principles inform everything we do. Whether you're preparing content, designing an interface or developing an entire service, start by reading these. </h1> </div>

  • 2
    Supppppper .... I even know where I will use it))))) - Air
  • I’ve already seen this question and the answers ... but I didn’t see the last answer - Air
  • Looks great on a computer, but there would be a master class if it worked in the tablets ... but put it on - MaximLensky