SVG feDiffuseLighting Element (original) (raw)

Last Updated : 6 Apr, 2022

The SVG 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 :

Contents...

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 `

            <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>

`

Output:

Example 2:

HTML `

            <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>

`

Output: