SVG feDiffuseLighting Element
The SVG <feDiffuseLighting> filter primitive lights an image using the alpha channel as a bump map. Using diffuse lighting the sides of the object facing the light are brighter and the sides facing away are darker and in shadow.
Syntax :
<feDiffuseLighting> Contents... </feDiffuseLighting>
Attributes:
- in —The in attribute identifies input for the given filter primitive.
- surfaceScale — It represents the height of the surface. Its value is multiplied by the alpha value. Default value is 1.
- diffuseConstant — It is a non-negative number whose default value is 1.
- kernelUnitLength — It tells the intended distance between successive columns and rows in the kernelMatrix. The intended distance is represented in current filter units. Default value is 1.
Example 1:
HTML
<!DOCTYPE html>
< html >
< body >
< svg viewBox = "0 0 1000 1000" >
< filter id = "lightMe2" >
< feDiffuseLighting in = "SourceGraphic"
surfaceScale = "1" diffuseConstant = "2"
kernelUnitLength = "2" >
< fePointLight x = "80" y = "80" z = "40" />
< feDistantLight azimuth = "240"
elevation = "20" />
</ feDiffuseLighting >
< 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" >
< feDiffuseLighting in = "BackgroundImage"
surfaceScale = "4" diffuseConstant = "2"
kernelUnitLength = "2" >
< feSpotLight x = "30" y = "20" z = "30"
limitingConeAngle = "40"
pointsAtX = "200" pointsAtY = "200"
pointsAtZ = "0" />
< fePointLight x = "80" y = "80" z = "40" />
</ feDiffuseLighting >
< 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 = "blue"
style = "filter: url(#lightMe3);" />
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
06 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...