The stdDeviation attribute explains the standard deviation for the blur operation. Only <feGaussianBlur> element is using this attribute.
Syntax:
stdDeviation = <number-optional-number>
Attribute Values: The stdDeviation attribute accepts the values mentioned above and described below
- number-optional-number: It is a pair of numbers. The first number denotes the standard deviation value along the X-axis. The second value denotes the standard deviation value along the Y-axis. If only one value is given then it is considered as a standard deviation along both the axis.
Note: The default value for stdDeviation is 0.
Example 1: Below example illustrates the use of stdDeviation when its value is 1
HTML
<!DOCTYPE html> < html >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< svg viewBox = "-10 10 680 400" < filter id = "geek1" >
< feGaussianBlur stdDeviation = "1" />
</ filter >
< polygon points = "50 15, 100 100, 0 100"
fill = "green" style = "filter: url(#geek1);" />
</ svg >
</ body >
</ html >
|
Output:
Example 2: Below example illustrates the use of stdDeviation when its value is 4.
HTML
<!DOCTYPE html> < html >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< svg viewBox = "-10 10 680 400" < filter id = "geek2" >
< feGaussianBlur stdDeviation = "4" />
</ filter >
< polygon points = "50 15, 100 100, 0 100"
fill = "green" style = "filter: url(#geek2);" />
</ svg >
</ body >
</ html >
|
Output:
Example 3: Below example illustrates the use of stdDeviation when its value is 8
HTML
<!DOCTYPE html> < html >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< svg viewBox = "-10 10 680 400" < filter id = "geek3" x = "-30%" y = "-30%" width = "160%" height = "160%" >
< feGaussianBlur stdDeviation = "8" />
</ filter >
< polygon points = "50 15, 100 100, 0 100" fill = "green" style = "filter: url(#geek3);" />
</ svg >
</ body >
</ html >
|
Output: