Skip to content
Related Articles

Related Articles

Improve Article

SVG Element

  • Last Updated : 14 Dec, 2020
Geek Week

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :