The SVG <feGaussianBlur> element is used to create blur effects:
Syntax:
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
Attributes:
- in: It is used to identifies input for the given filter primitive.
- stdDeviation: It is used to defines the standard deviation for the blur operation.
- edgeMode: It is used to determines how to extend the input image as necessary with color values.
Example:
<!DOCTYPE html> <html>
<body>
<svg height="400" width="400">
<defs>
<filter id="gfgid" x="0.5" y="0.5">
<feGaussianBlur in="SourceGraphic"
stdDeviation="10" />
</filter>
</defs>
<rect width="120" height="120"
stroke="green" stroke-width="4"
fill="green" filter="url(#gfgid)" />
</svg>
</body>
</html>
|
Output:
Example: Customize blurry circle.
<!DOCTYPE html> <html>
<body>
<svg height="400" width="400">
<defs>
<filter id="gfgid" x="0" y="0">
<feGaussianBlur in="SourceGraphic"
stdDeviation="05" />
</filter>
</defs>
<circle cx="40" cy="40" r="50"
stroke="black" stroke-width="2"
fill="grey" filter="url(#gfgid)"/>
</svg>
</body>
</html>
|
Output: