SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.
The <feGaussianBlur> element adds a smooth blur to the graphic based on the standard deviation provided in the input primitive.
Syntax:
<feGaussianBlur in="" stdDeviation="" edgeMode=""/>
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
<!DOCTYPE html> <html>
<body>
<svg viewBox="0 0 1000 1000">
<filter id="lightMe2">
<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>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html> <html>
<body>
<svg viewBox="0 0 1000 1000">
<filter id="lightMe3" x="-50"
y="-40" width="200" height="150">
<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>
</body>
</html>
|
Output: