SVG fePointLight Element

The <fePointLight> filter primitive defines a light source which allows to create a point light effect.

Syntax:

<fePointLight x="" y="" z="" />

Attributes :

x: It defines a x-axis coordinate in the user coordinate system.
y: It defines a y-axis coordinate in the user coordinate system.
z: It defines a z-axis coordinate in the user coordinate system.

Example:

HTML

<!DOCTYPE html>
<html>

<body>
    <svg width="200" height="200">
        <defs>
            <filter id="spotlight">
                <feSpecularLighting result="spotlight" 
                    specularConstant="1.9" 
                    specularExponent="500"
                    lighting-color="#FFF">

                    <fePointLight x="10" y="10" z="150" />

                </feSpecularLighting>
                <feComposite in="Backgrou" in2="spotlight" 
                    operator="arithmetic" k1="3" 
                    k2="3" k3="1" k4="0" />
            </filter>
        </defs>

        <image xlink:href=
            "C:/Users/pc/Desktop/gfg/capture42.png" 
            x="10%" y="10%" width="80%" height="80%"
            style="filter:url(#spotlight);" />
    </svg>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<body>

    <svg width="200" height="200">
        <defs>
            <filter id="spotlight">
                <feSpecularLighting result="spotlight" 
                    specularConstant="1.5" 
                    specularExponent="80"
                    lighting-color="#FFF">

                    <fePointLight x="20" y="20" z="200" />

                </feSpecularLighting>
                <feComposite in="SourceGraphic" 
                    in2="spotlight" operator="arithmetic" 
                    k1="0" k2="1" k3="1" k4="0" />
            </filter>
        </defs>

        <image xlink:href=
            "C:/Users/pc/Desktop/gfg/capture25.png" 
            x="10%" y="10%" width="80%" height="80%"
            style="filter:url(#spotlight);" />
    </svg>
</body>

</html>

Output:

Example 3:

HTML

<!DOCTYPE html>
<html>

<body>

    <svg width="200" height="200">
        <defs>
            <filter id="spotlight">
                <feSpecularLighting result="spotlight" 
                    specularConstant="1.5" 
                    specularExponent="80"
                    lighting-color="#FFF">

                    <fePointLight x="12" y="12" z="120" />

                </feSpecularLighting>
                <feComposite in="SourceGraphic" 
                    in2="spotlight" operator="arithmetic" 
                    k1="0" k2="1" k3="1" k4="0" />
            </filter>
        </defs>

        <image xlink:href=
            "C:/Users/pc/Desktop/gfg/capture14.png" 
            x="10%" y="10%" width="80%" height="80%"
            style="filter:url(#spotlight);" />
    </svg>
</body>

</html>

Output:

SVG fePointLight Element

Explore