svgweb-frontendsvg-filters

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

I'm trying to achieve a linear blur effect like the one on the image, but using just svg, no css!!!

linear blur

Notice how the top of the image is completely blurred, but the bottom isn't.

In SVG Blur effect can be achieved using feGaussianBlur. The gradient can be used with linearGradient.

How can these two be combined?

Solution

  • 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>

    Enjoy Progressively Blurred Chaka Khan