SVG Flashlight Visual Effect Tutorial

Light in the Darkness

SVG Flashlight Visual Effect Example Introduction SVG Markup Radial Gradient Ellipse JavaScript Animation Tips Source Code Page Summary


Learn to create the effect of a flashlight searching in the darkness. Use SVG and JavaScript alone. No graphics are required. This tutorial demonstrates how to create an SVG radial gradient, and animate the center of the gradient. Readers new to SVG might read the SVG Rectangle: Beginner's Guide, first.

SVG Markup

Declare an SVG element in a Web page. Include the svg namespace in the opening svg tag of the SVG element. The value assigned to the xmlns attribute, points to the SVG specification. The following markup demonstrates declaring the SVG tag. The height and width equal 300. The id equals sv.


Radial Gradient

Declare a defs tag which encloses a radialGradient tag. Set the radialGradient tag's cx,cy,r,fx, and fy attributes.

Attribute cx represents the center of the X position of the radial gradient. Attribute cy represents the center of the Y position of the radial gradient. Attributes cx and cy represent the center or origin of a radial gradient's circle. The r property sets the size of the radius of the circle. This article explains how to animate the cx property.

The radialGradient displays a gradient of color radiating outward from colors closest to the origin (center) of the circle, outward to the edge of the circle.

The following markup demonstrates how to define the radial gradient with SVG. The markup declares an id attribute with the value grad. JavaScript accesses the SVG gradient by id, in order to provide animation.




Stop Colors

Declare four stop tags with offset, stop-color, and stop-opacity attributes. The following markup demonstrates the first stop tag.


The offset attribute determines where the color begins to display, based on the origin of the circle. For example, the first stop begins at offset="0%". Therefore the first stop-color starts at the center of the circle. The second stop begins at offset="20%". Therefore the second stop-color begins to display 20% of the distance away from the center of the circle. The following markup demonstrates declaring the attributes for the second stop color.


The stop-colors in this example apply RGB decimal triplets. The triplets represent the color which displays at the assigned offset value, within the radial gradient. For example the first stop-color color equals rgb(255,255,255). The first stop-color displays as pure white at the offset which equals 0%. Therefore the first stop color displays white in the very center of the radial gradient.

The second stop-color equals rgb(200,200,255) representing 200 out of a maximum value of 255 for the red and green channels. However the blue channel displays at the full value of 255. The second offset equals 20% Therefore about one fifth from the origin of the circle a very bright bluish color displays. The SVG Flashlight Visual Effect displays a barely noticeable blue shade.

Stop Opacity

The stop-opacity attribute indicates the level of transparency for a stop-color. Values range between 0.0 and 1.0 Values determine how much of the background image shows through the gradient. A value of 0 means the entire background shows through. A value of 1 means none of the background shows through and the full stop color displays.

The first stop color includes an opacity value of 0 therefore the background black color shows through. However stop locations farther from the origin provide gradations. Gradations allow blending between stop colors.

The second stop color includes an opacity value of 0.9. Therefore 90% of the very light blue color shows through with a gentle gradation. Optionally developers and designers might omit the opacity value. Instead determine the exact red, green, and blue, channel colors required to render the desired shade. In other words, since the flashlight example displays on black, prepare a darker color which doesn't need transparency. Alpha transparency can slow performance on some devices.

The SVG markup declares four complete stop tags. The stop tags create colors which radiate outward, becoming more transparent the farther they appear from the center of the circle. However the center of the circle includes a solid dark area. The effect resembles light from a flashlight.

The Ellipse

The def tag includes definitions which describe a radial gradient with a set of stop colors and opacities. Declare an ellipse element below the def element. The url attribute of the ellipse tag reuses the id assigned to the radialGradient previously. That assignment causes the ellipse to fill with the radial gradient we just declared.

The following line of code assigns the grad id to the fill attribute of an SVG element. Remember grad is the id of the radial gradient we just declared. The next step demonstrates declaring the entire SVG ellipse with more attributes, including fill.


The following markup includes all the elements needed to declare the ellipse. The cx and cy attributes declare the X and Y coordinates for the center of the ellipse. The ellipse's origin equals (150,150), which is the center of the SVG element. The SVG width and height equal 300. The ellipse's major and minor diameter are equal, making the ellipse a circle. The circle has an X radius of 75 assigned to attribute rx. The circle has a Y radius of 75 assigned to attribute ry.


Now we're done with the SVG portion of the tutorial and it's onto JavaScript.

JavaScript Animation

JavaScript animates the cx property of the radialGradient only. Obtain a reference to the radialGradient, with the following expression.

grad = document.getElementById(

Create an Array of values between the range of 0 to 1. Each value in the array named A_CX Array sets the X position of the center of the radial gradient, during animation.

A_CX = 

Play the Animation

When the user taps the div element, which encloses the svg tag, call user defined JavaScript function runStartF(). Function runStartF() plays the animation forward. First runStartF() stops the timer if it's active. The timer's active if it's not null. Second runStartF() initializes the frame counter to zero. Third runStartF() initializes a timer which activates function runAnimationF(); every 100 milliseconds. Variable N_TIME equals 100.

The following listing includes the entire runStartF() function.

function runStartF(){
 if (timer != null){


 nFrameCount = new Number(0); 

 timer = setInterval(


Function runAnimationF() verifies the frame count hasn't exceeded the length of array A_CX. If so then runAnimationF() stops the current animation and initializes a timer to run the animation backward.

Otherwise if the frame count is within bounds, then runAnimationF() assigns the gradient's cx attribute based on an index into the array named A_CX. The following listing demonstrates setting an SVG attribute. Method setAttributeNS() is built into SVG.





Play Both Directions

This example animates the light moving left then right, three times.

Code includes functions to iterate over the A_CX Array both backward and forward. A loop counter stops the animation after three full loops. See SVG Flashlight Visual Effect Source Code for details.

Tips, Tricks, and Issues

The values at both ends of the A_CX Array move forward then backward again. The goal was to provide just a little bounce effect with some jitter to the animation. Perfectly spaced numbers create a robotic feel to the animation. Usually when someone's navigating with a flashlight the motion's a little uneven.


This article explained how to create a light effect with SVG and JavaScript alone. The animated lighting effect with JavaScript and SVG looks like the light of a flashlight searching in the dark. No graphics were required for this tutorial. This tutorial demonstrated how to create an SVG radial gradient, and animate the center of the gradient.

See more SVG & HTML5 examples. Have fun and love learning!

More SVG & HTML5 Examples!

Ad for 3D Marketing Learn 3D Programming Ad
Copyright © 2015 Seven Thunder Software. All Rights Reserved.