SVG Blur Effects
Last Updated :
17 Aug, 2020
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:
Share your thoughts in the comments
Please Login to comment...