SVG

Introduction

This animated SVG circle squashes when it hits the lower and right edges of a blue outlined box. Learn to use CSS3 animation, simple JavaScript and an SVG circle for this procedural video.

CSS3

Create Outlined View Box

First center the blue outlined box in our viewing area.

.blueBox{
width:300px;
height:300px;
display:block;
border:solid 1px blue;
margin:0px auto 0px auto;
}

Assign Animation

Second create a box for animation. Assign the animation to keyframes named anim. Runs for five seconds infinitely.

.animTime{
width: 300px;
height: 300px;
text-align:center;
display:block;
clear:both;
fill: blue;
background-color:transparent;
animation: anim 5s infinite;
transition-timing-function: ease-out;
}

Declare Animation

Our view box is 300 x 300 pixels wide. Our circle has a radius of 50 pixels. The origin of the circle is its upper left hand corner. The circle begins at the origin of the box which is the very center at (0,0). Therefore the box's upper left hand corner is (-150,-150) pixels but we subtract the radius of the circle. Therefore returning to the upper left hand corner returns the circle to location (-100,-100).

Circle fill colors also change.

/* Circle origin and Scale = upper right corner */
/* circle radius 50 */

/* center of box (0,0) */
/* Box 300 square
/* Subtract or add radius of circle to touch edges. */
@keyframes anim {
0%   {
/* From center up and left.*/
fill: blue;
transform: translate(-100px,-100px) scaleX(1) scaleY(1); 
}

25%  {
fill:violet;
/* Half way along X axis:0px*/
/* Y = 300/2 + 100(start point) + 50*0.2 = 262.5*/
transform: translate(0px,263px) scaleY(0.2); 
}

50%  {
fill: green;
/* X = 300/2 + 50 because circle is squashed on X. */
transform: translate(200px,-100px) scaleX(0.5) scaleY(1) ; 
}

100% {
fill: blue;
/* Back to the upper left corner */
transform: translate(-100px,-100px) scaleX(1) scaleY(1);
}
}

JavaScript

Click on the graphic area to toggle animation on and off, with JavaScript as follows.

var elem, box = null;
var bPlaying = true;

function getElements(){
elem  = document.getElementById('elem');
box = document.getElementById('box');
}

function animStopStart(){
if(elem == null){
getElements();
}

if (bPlaying == false){
elem.style.animationPlayState = "running";
if(box != null)
box.style.animationPlayState = "running";
bPlaying = true;
}

else{
elem.style.animationPlayState = "paused";
if(box != null)
box.style.animationPlayState = "paused";
bPlaying = false;
window.location.assign("#top");
}
}

SVG

The SVG's just an ellipse with fill color of blue, centered at (150,150) in a 300x300 pixel box. The radii of both axes of the ellipse start at 50 pixels along the major axis and 50 along the minor axis.

I used a little simple math to determine when the circle hits the edges, how far it squashes, how far to move it based on whether it's scaled along the X or Y axis.

<svg 
version="1.1" 
class="blueBox"
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0px" y="0px" 
width="300px" height="300px"
viewBox="0 0 300 300" 
enable-background="new 0 0 300 300" 
xml:space="preserve"
>

<ellipse 
class="animTime" 
fill="#0000FF"  
id="elem"  
cx="150" 
cy="150" 
rx="50" 
ry="50"/>
</svg>