SVG

Introduction

Tap the light to start and stop flashlight animation. This animated lighting effect searches in the dark with SVG and JavaScript. Jumpy motion adds to the sense of hand motion, as the light moves back and forth. The animated flashlight VFX was designed with SVG and implemented with HTML5 and JavaScript.

This example doesn't use CSS3 for animation, however the next page applies CSS3 instead of JavaScript, for animation.

The CSS3 animation runs a little smoother. Smoothness reduces the appearance of shakey hand motion.

HTML5

The following SVG declares the light as an ellipse with gradations of gray. Declare the center of each ellipse with attributes, cx,cy. Declare the radius of each ellipse with attribute, rx,ry.

The application of radialGradient provides circular gradations of light within the ellipse. See flashlight.svg.

<svg id="sv" 
height="256" width="256" 
xmlns="http://www.w3.org/2000/svg">
<defs>   
   
<radialGradient 
id="grad" 
cx="50%" cy="50%" 
r="30%" fx="50%" 
fy="50%">

<stop 
id="stopIn" 
offset="0%" 
style="stop-color:rgb(255,255,255); 
stop-opacity:0" />

<stop 
id="stopMid" 
offset="20%" 
style="stop-color:rgb(200,200,255); 
stop-opacity:0.9" />

<stop 
id="stopOut" 
offset="60%" 
style="stop-color:rgb(128,128,180);
stop-opacity:0.45" />

<stop 
id="stopEdge" 
offset="100%" style="stop-color:rgb(0,0,0); 
stop-opacity:0" />

</radialGradient>

</defs>                   
<ellipse 
id="ellipse" 
cx="128" cy="128" 
rx="64" ry="64" 
fill="url(#grad)" />  
   
</svg>

Animation

This example implements animation with JavaScript. Script modifies properties of the ellipse, in response to a timer.

JavaScript

The following JavaScript applies numbers in an array to the X axis of the center of the ellipse, based on the current frame number.

The frame number indexes into the constant array named, A_CX. The following call to setAttributeNS(), assigns the X value of the circle's center to the value in array, A_CX at the index value accessed with nFrameCount.

grad.setAttributeNS(
null, 
'cx', 
A_CX[nFrameCount]
);

The entire JavaScript follows, with comments for explanation.

// The SVG ellipse:
var ellipse 	= null;
// The SVG area:
var sv	= null;
// The radial gradient:
var grad = null;					
// eDebug data for the user:
var eDebug	= null;		
// Timer for he animation:
var timer	= null;

//Value corresponds to styles:
const N_GRAPHIC = Number(0.45);
const N_CONTENT = Number (0.9);

// The animation frame counter:
var nFrameCount = 0;
var bRunning = false;
var bForward = true;
		
// Time in milliseconds, 
// between frames.		
const N_TIME = new Number(100);

// The location of the
// center of each gradient:
const A_CX = [0.31,0.32,0.31,0.34,
              0.35,0.36,0.4,0.45,
              0.5,0.55,0.6,0.65,
              0.72,0.73,0.72];
//The maximum number 
//of frames to display:
const N_FRAME_MAX = 14;

/**
 * Load this example.
 * Save HTML elements
 * by ID.
 */
function loadFlashlight(){
sv = document.getElementById(
"sv"
);

grad = document.getElementById(
"grad"
);
		
ellipse = document.getElementById(
"ellipse"
);
				
eDebug = document.getElementById(
"eDebug"
);

// Resize the viewing
// area and ellipse
// based on this browser's
// content space.
resizeSVG();
}	
	
/**
* function resizeSVG() is called when 
* a desktop browser window resizes, the 
* device reorients.
*
* Resize the graphic area
* based on new dimensions.
* Reorient the radii
* and center coordinates
* of the light.
*/		 
function resizeSVG(){
	
if (sv != null){
						
var b = document.getElementsByTagName(
'body')[0];

var nW = b.clientWidth * N_CONTENT;
var nH = b.clientHeight; 
var nDim = Number(0);
var nDimHalf = Number(0);
var nRadius = Number(0);

if (nW > nH){		
nDim = Math.floor(nW * N_GRAPHIC);
}
else {
nDim = Math.floor(nW);
}
nDimHalf = nDim/2;
nRadius = nDim * N_GRAPHIC;

sv.setAttributeNS(
null,'width',nDim);

sv.setAttributeNS(
null,'height',nDim);

ellipse.setAttributeNS(
null,'rx',nRadius);

ellipse.setAttributeNS(
null,'ry',nRadius);	

ellipse.setAttributeNS(
null,'cx',nDimHalf);

ellipse.setAttributeNS(
null,'cy',nDimHalf);	

}						
}
		
/**
* Play animation forward.
* Timer response.
*/
function runAnimationF(){
if(nFrameCount >= N_FRAME_MAX){				
runStop();
runStartB();
return;
}	
nFrameCount++;

grad.setAttributeNS(
null, 
'cx', 
A_CX[nFrameCount]
);

displayOutput()
}

/**
* Run the animation
* backwards.
* Timer response.
*/
function runAnimationB(){
if(nFrameCount <= 0){
runStop();
runStartF();
return;
}

nFrameCount -= 1;

grad.setAttributeNS(
null, 
'cx', 
A_CX[nFrameCount]);

displayOutput()	
}


/**
 * Stop the animation.
 */
function runStop(){
clearInterval(timer);
timer = null;
bRunning = false;	
}

/**
 * Start the animation
 * running backwards.
 */
function runStartB(){
	
if (timer != null){
runStop();
}	
bForward = false;
timer = setInterval(
function(){
runAnimationB();},
N_TIME
);		

}

/**
 * Start the animation
 * running forward.
 */
function runStartF(){
	
if (timer != null){
runStop();
bRunning = false;
return;

}

bForward = true;
nFrameCount = 0;	

timer = setInterval(function(){
runAnimationF();},
N_TIME
);

bRunning = true;

}

/**
 * Tell the user which
 * direction the flashlight's
 * running and which framecount
 * we're displaying.
 */
function displayOutput(){
if (bForward == true){
eDebug.innerHTML = "Forward:<br>";
}
else{
eDebug.innerHTML = "Backward:<br>";	
}
eDebug.innerHTML +="cx:"+A_CX[nFrameCount];
eDebug.innerHTML += ",iFrameCount:"+nFrameCount;		
}

Summary

Tap the light to start and stop flashlight animation. The animated lighting effect searches in the dark. Jumpy motion adds to the sense of hand motion, as the light moves back and forth. The animated flashlight light effect was designed with SVG and implemented with HTML5 and JavaScript.

This example doesn't use CSS3 for animation, however the next page applies CSS3 instead of JavaScript, for animation.

The CSS3 animation runs a little smoother. Smoothness reduces the appearance of shakey hand motion.

See or download the JavaScript flashlight.js and flashlight.svg SVG.