SVG <feGaussianBlur> Element
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:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...