Open In App

SVG feDiffuseLighting Element

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads