<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>Vortex of canvas circles</title>
<style type='text/css'>
* {
margin:0;
padding:0;
}
canvas {
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-320px;
border:1px solid #000;
}
</style>
<script type='text/javascript'>
function ani() {
var ctx=document.getElementById('canvas').getContext('2d')
c++
cd=Math.round((t-c)/d)
ctx.strokeStyle="rgb("+cd+","+cd+","+cd+")"
ctx.beginPath()
ctx.arc(x,y,rr,0,Math.PI*2,true)
ctx.stroke()
rr+=p
do {
nx=x+(Math.floor(Math.random()*11)-5)
ny=y+(Math.floor(Math.random()*11)-5)
} while (nx-rr<2 || nx+rr>637 || ny-rr<2 || ny+rr>397)
x=nx
y=ny
if (rr<r) setTimeout("ani()",40)
}
function load() {
x=320
y=200
r=180
rr=0
p=.5
t=r/p
d=t/255
c=0
ani()
}
window.onload=load
</script>
</head>
<body>
<canvas id='canvas' width='640' height='400'></canvas>
</body>
</html>