apike.ca
apike.ca

feGaussianBlur (SVG Filter Effect)

By mbystedt on Mar 2, 2014, 7:14:04 AM

A gaussian blur is a common type of blur that reduces noise and produces an effect similar to bokeh (out of focus parts of a photograph). Blurring a solid color has no effect.

This filter is often used with the alpha-channel only. This results in a shadow as it mimics the effect of more transparent parts letting through more light.

Attribute
Values
Comments
stdDeviation
>=0
Controls the distance each sample spreads. A value of 0 disables. Two comma or whitespace separated numbers can be used to control x and y separately. (default: '0')

See: Filter Effect Common Attributes

<defs>
  <!-- Filter Definition -->
  <filter id="gauss2" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur stdDeviation="2"/></filter>
  <filter id="gauss4" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur stdDeviation="4"/></filter>
  <filter id="gauss8" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur stdDeviation="8"/></filter>
</defs>
 
<!-- Gaussian Examples -->
<g fill="none" stroke="blue" stroke-width="20" stroke-dasharray="3,6,8,11">
  <circle cx="80" cy="80" r="50" />
  <circle cx="240" cy="80" r="50" filter="url(#gauss2)" />
  <circle cx="400" cy="80" r="50" filter="url(#gauss4)" />
  <circle cx="560" cy="80" r="50" filter="url(#gauss8)" />
</g>
Example 1. Gaussian Blur. Dimensions of the filter have increased to 140% for a better fit. (Download)
Example 2. Gaussian Blur only along x-axis. (Download)

Live Demo