How to apply the SVG filter feGaussianBlur by avoiding redundand SVG elements?

Question

I am using the SVG filter

feGaussianBlur

in my application. By testing several configurations, I like the effect the most if I add identical SVG shapes and apply the filter to it.

Is there a simple way to achieve the same result by applying the filter (with certain parameters) to just the target SVG shape (in order to avoid creating redundand SVG elements?

E.g. see my example below. I like the third circle the most. However, it is created by adding multiple circles on top of each other.

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur -->

<svg width="400" height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  
  <rect width="430" height="120"></rect>

  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    
  </filter>

  <circle cx="60"  cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
  
  <circle cx="280" cy="60" r="50" fill="green" filter="url(#blurMe)" />
  <circle cx="280" cy="60" r="50" fill="green" filter="url(#blurMe)" />
  <circle cx="280" cy="60" r="50" fill="green" filter="url(#blurMe)" />
  <circle cx="280" cy="60" r="50" fill="green" filter="url(#blurMe)" />
  <circle cx="280" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>

Answer 1

You can tweak the transparency of the blur by using an feColorMatrix. The 4th row, 4th column value is the multiplier for the original alpha value. It looks like 1.5x is about right for your effect.

You can do additional manipulation of the blur using other primitives. This is a tool I wrote that outputs filter text to give you an idea of some of the things you can do:

https://codepen.io/mullany/details/sJopz

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur -->

<svg width="400px" height="120px"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 color-interpolation-filters="sRGB">
  
<defs>

  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <filter id="blurAndMultiplyAlpha">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    <feColorMatrix type="matrix" values="1 0 0 0 0 
                                         0 1 0 0 0 
                                         0 0 1 0 0 
                                         0 0 0 1.5 0"/>
  </filter>

 </defs>

  <rect width="430" height="120"/>

  <circle cx="60"  cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
  
  <circle cx="280" cy="60" r="50" fill="green" filter="url(#blurAndMultiplyAlpha)" />

</svg>