SVG

Introduction

This animated lighting effect's implemented with CSS3 radial gradients and key frames. Tap the graphic to turn animation on and off. The light grows brighter, over time.

Increments between brighter and darker frames represent steps as someone walks closer with a flashlight.

Currently this example doesn't use SVG, however the next page, applies the same JavaScript and similar radial gradient, with an SVG image.

CSS3

The enclosing element is a 256 square pixel block. The animated element is also 256 square pixels, however the element employs a blur filter with filter:blur(4px); and a radial gradient.

Animation

The radial gradient within rule-set, animTime, represents the starting radial gradient for the keyframes. Each keyframe grows brighter from the inside out.

#elem{
display:block;
margin:0px auto 0px auto;
}

.animTime{
width:256px;
height:256px;
text-align:center;
display:block;
clear:both;
filter:blur(4px);
background: radial-gradient(
#ffffff 2%, 
#555555 20%, 
#222222 30%, 
black 70%
);
animation: anim 2s infinite;
transition-timing-function: ease-in;
}

@keyframes anim {
0%   {
background: radial-gradient(
#ffffff 2%, 
#555555 20%, 
#222222 30%, 
black 70%
);
}

15%   {
background: radial-gradient(
#ffffff 5%, 
#555555 30%, 
#222222 40%, 
black 70%
);
}

25%   {
background: radial-gradient(
#ffffff 15%, 
#555555 35%, 
#222222 45%, 
black 70%
);
}

50%  {
background: radial-gradient(
#ffffff 20%, 
#555555 40%, 
#333333 50%, 
black 70%
);
}

65%  {
background: radial-gradient(
#ffffff 22%, 
#555555 42%, 
#333333 52%, 
black 70%
);
}

75%   {
background: radial-gradient(
#ffffff 25%, 
#555555 45%, 
#333333 55%, 
black 70%
);
}

90%   {
background: radial-gradient(
#ffffff 28%, 
#555555 48%, 
#333333 58%, 
black 70%
);
}

100% {
background: radial-gradient(
#ffffff 30%, 
#555555 50%, 
#333333 60%, 
black 70%
);
}
}

HTML5

Very simple HTML5 elements display this example, as follows.

<div 
id="eGraphic" 
onclick="animStopStart()"
>

<h3>Tap to Start:Stop Animation</h3>

<div id="box">

<span 
id="elem" 
class="animTime">
</span>

</div>

<div id="eDebug">
</div>

</div>

JavaScript

See JavaScript file, anim-generic.js. JavaScript file, anim-generic.js is also listed on SVG: Moving Circle - Page 2, in the JavaScript section. The same JavaScript file applies to multiple examples in this set of tutorials.

Summary

This animated lighting effect's implemented with CSS3 radial gradients and key frames. Tap the graphic to turn animation on and off. The light grows brighter, over time.

Increments between brighter and darker frames represent steps as someone walks closer with a flashlight.

Currently this example doesn't use SVG, however the next page, applies the same JavaScript and similar radial gradient, with an SVG image.