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:
Please Login to comment...