Applying a Backdrop-Filter: Blur(); to an Svg Path

Applying a backdrop-filter: blur(); to an SVG path

using clipPath SVG and clipping a duplicate img with the blur filter will get you something like this:

body {

  margin 10px;

}

.clipped {

  position: absolute;

  top: 10px;

  left: 10px;

  clip-path: url(#svgTextPath);

  filter: blur(10px);

}

<img src="https://picsum.photos/id/99/500/300">

<img class="clipped" src="https://picsum.photos/id/99/500/300">

<svg height="0" width="0">

    <defs>

        <clipPath id="svgTextPath">

            <text x="50" y="200" textLength="400px" font-family="Vollkorn" font-size="200px" font-weight="700"> Text </text>

        </clipPath>

    </defs>

</svg>

CSS: Workaround to backdrop-filter?

As of Chrome M76, backdrop-filter is now shipped, unprefixed, and without a needed flag.

https://web.dev/backdrop-filter/

NOTE: (since this answer keeps getting downvoted because Mozilla hasn’t yet shipped it): this feature is available in Safari, Chrome, and Edge, but not yet in Firefox. Mozilla is planning to ship it very soon, but hasn’t yet. So this answer doesn’t contain a “workaround” but simply more information about which browsers require a workaround. Which still seems like useful information.

How to achieve a Progressive Blur using SVG by combining a filter with a mask?

While it's possible to do this entirely in a filter without using double images, the solution can be buggy because of how both Firefox and Chrome handle ops on low opacities. So this is an alternative & straightforward way to do it using doubled images. Note that you have to clip the image edges for a clean image because feGaussianBlur creates edge fades.

<svg width="800px" height="600px">
  <defs>
    <linearGradient id="progFade" x1="0%" x2="0%" y1="0%" y2="100%">
      <stop offset="0%" stop-color="black"/>
      <stop offset="60%" stop-color="white"/>      
    </linearGradient>
    
    <mask id="progFadeMask" >
        <rect x="0%" y="0%" width="100%" height="100%" fill="url(#progFade)"  />
      <mask>
    
   <filter id="blurme" x="0%" y="0%" width="100%" height="100%">
     <feGaussianBlur stdDeviation="15" result="blurry"/>
    </filter>

     <clipPath id="outerclip">
       <rect x="20" y="20" width="460" height="380" fill="black">
      </clipPath>
    </defs>

<g clip-path="url(#outerclip)">
      
 <image x="0" y="0" filter="url(#blurme)" xlink:href="http://cps-static.rovicorp.com/3/JPG_400/MI0003/890/MI0003890640.jpg" width="494" height="400"/>
  <image x="0" y="0" mask="url(#progFadeMask)" xlink:href="http://cps-static.rovicorp.com/3/JPG_400/MI0003/890/MI0003890640.jpg" width="494" height="400"/>
       </g>
</svg>

Is blurring or fading out an SVG path possible?

This is a way to hack a progressive blur along a path by abusing stroke-dash-array and opacity manipulation within an SVG filter. Basically, you carefully construct a stroke dash array of increasing spaces, then use a large blur to "fill in the gaps". Then you boost the opacity using a component transfer and then use the original graphic to mask out the overflow. Note you must first draw your path in white (or your background color) and then the stroke dashed path over it so you have the proper selection for compositing. For a general solution, you'd need to construct the stroke-dash array and the filter using JavaScript because it and the stdDeviation you want to use are going to be dependent on the path length.

<svg width="800px" height="600px" color-interpolation-filters="sRGB" viewBox="0 0 1600 1200">

  <defs>

    <filter id="fade-out">

      

      <feGaussianBlur in="SourceGraphic" stdDeviation="16" result="blur-source"/>

    

      <feComponentTransfer result="fader">

        <feFuncA type="gamma" exponent=".5" amplitude="2"/>

      </feComponentTransfer>

          

      <feComposite operator="in" in="fader" in2="SourceGraphic"/>    

  

    </filter>

  </defs>

<g filter="url(#fade-out)">

   <path d="M200,300 Q400,50 600,300 T1000,300" stroke-width="5" fill="none" stroke="white"/> 

  

  <path d="M200,300 Q400,50 600,300 T1000,300"

        fill="none" stroke="red" stroke-width="5" stroke-dasharray="10,1,8,3,8,5,7,7,7,9,6,11,6,13,5,15,5,17,5,19,5,21,5,23,5,25,5,27,5,29,5"/> 

  </g>

</svg>

---

Related Topics