SVG Blur Effects
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:
Contact Us