<!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>Random 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'); ctx.clearRect(0,0,640,400); for (var i=0;i<num;i++) { ctx.beginPath(); ctx.arc(a[i],b[i],c[i],0,Math.PI*2,true); ctx.stroke(); nc=c[i]+Math.floor(Math.random()*3)-1 if (nc<25) nc=25 else if (nc>75) nc=75 c[i]=nc nb=b[i]+Math.floor(Math.random()*3)-1 if (nb<c[i]) nb=c[i] else if (nb>400-c[i]) nb=400-c[i] b[i]=nb na=a[i]+Math.floor(Math.random()*3)-1 if (na<c[i]) na=c[i] else if (na>640-c[i]) na=640-c[i] a[i]=na } setTimeout("ani()",40) } function load() { a=new Array() b=new Array() c=new Array() num=10 for (var i=0;i<num;i++) { c[i]=Math.floor(Math.random()*50)+25 b[i]=Math.floor(Math.random()*(400-c[i]*2))+c[i] a[i]=Math.floor(Math.random()*(640-c[i]*2))+c[i] } ani() } window.onload=load </script> </head> <body> <canvas id='canvas' width='640' height='400'></canvas> </body> </html>