<canvas id="canv1"></canvas>
<canvas id="canv2"></canvas>
<canvas id="canv3"></canvas>
<canvas id="canv4"></canvas>

canvas{
  background:white;
  box-shadow:0 0 40px -5px #dedede;
  position:absolute;
  left:50%;
  top:50%;  
  width:250px;
  height:250px;
}
#canv1{
  margin:-275px 0 0 -275px;
}
#canv2{
  margin:-275px 0 0 0;
}
#canv3{
  margin:0 0 0 -275px;
}
#canv4{
  margin:0;
}
body{
  background:#fff8ee;
}

canvas1 = document.getElementById("canv1");
canvas1.width = 250;
canvas1.height = 250;
context1 = canvas1.getContext("2d");

canvas2 = document.getElementById("canv2");
canvas2.width = 250;
canvas2.height = 250;
context2 = canvas2.getContext("2d");

canvas3 = document.getElementById("canv3");
canvas3.width = 250;
canvas3.height = 250;
context3 = canvas3.getContext("2d");

canvas4 = document.getElementById("canv4");
canvas4.width = 250;
canvas4.height = 250;
context4 = canvas4.getContext("2d");

//setTimeout("drawFrame()", 20);
var posX1 = 0;
var posX2 = 0;
var posX3 = 0;
var posX4 = 0;
var posY1 = 0;
var posY2 = 0;
var posY3 = 0;
var posY4 = 0;
function drawFrame(){
  drawFrame1();
  drawFrame2();
  drawFrame3();
  drawFrame4();
  setTimeout("drawFrame()", 10); 
}
drawFrame();

function drawFrame1() {
  x = 125+(Math.cos(posX1)*100);
  y = 125+(Math.sin(posY1)*100);
  context1.beginPath();
  context1.arc(x,y,3,0,2*Math.PI);
  context1.fillStyle = "#ffa36e";
  context1.fill();
  posX1 = posX1+0.14;
  posY1 = posY1+0.08;
}

function drawFrame2() {
  x = 125+(Math.cos(posX2)*100);
  y = 125+(Math.sin(posY2)*100);
  context2.beginPath();
  context2.arc(x,y,3,0,2*Math.PI);
  context2.fillStyle = "#ffa36e";
  context2.fill();
  posX2 = posX2+0.1;
  posY2 = posY2*0.2+posX2;
}
function drawFrame3() {
  x = 125+(Math.cos(posX3)*100);
  y = 125+(Math.sin(posY3)*100);
  context3.beginPath();
  context3.arc(x,y,3,0,2*Math.PI);
  context3.fillStyle = "#ffa36e";
  context3.fill();
  posX3 = posX3+0.05;
  posY3 = posY3*0.5+posX3;
}
function drawFrame4() {
  x = 125+(Math.cos(posX4)*100);
  y = 125+(Math.sin(posY4)*100);
  context4.beginPath();
  context4.arc(x,y,3,0,2*Math.PI);
  context4.fillStyle = "#ffa36e";
  context4.fill();
  posX4 = posX4+0.05;
  posY4 = posY4*0.75+posX4;
}