SVG <feGaussianBlur> Element (original) (raw)

Last Updated : 31 Mar, 2022

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The element adds a smooth blur to the graphic based on the standard deviation provided in the input primitive.

Syntax:

Attributes:

• in: The in attribute identifies input for the given filter primitive.
• stdDeviation: It defines the standard deviation for the smooth blur operation. The default value is 0.
• edgeMode: It signifies the extra pixels at the edges of the input layer.

Example 1:

HTML `

        <feGaussianBlur in="FillPaint" 
            stdDeviation="10" edgeMode="wrap" />

        <feComposite in="SourceGraphic" 
            in2="light" operator="arithmetic" 
            k1="1" k2="0" k3="0" k4="0" />

    </filter>
    <rect x="20" y="20" width="200" 
        height="200" fill="green" 
        style="filter: url(#lightMe2);" />
</svg>

`

Output:

Example 2:

HTML `

        <feOffset in="BackgroundImage" 
                dx="10" dy="10" />

        <feGaussianBlur in="offset2" 
                stdDeviation="3" />

        <feMerge>
            <feMergeNode in="blur" />
            <feMergeNode in="SourceAlpha" />
        </feMerge>

    </filter>
    <rect x="20" y="20" width="200" 
        height="200" fill="green" 
        style="filter: url(#lightMe3);" />
</svg>

`

Output: