Open In App

SVG fePointLight Element

Last Updated : 06 Apr, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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:


Next Article
HTML Introduction

E
epistler_999
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox