var palette = ['#b8cab5','#9fc3bc','#338ab3'];
var frame = window.setInterval(framedraw,40);
var blitx = new Array();
var canvas = document.getElementById('cc');
var c = canvas.getContext('2d');
for(var i = 0;i<100;i++){
  blitx[i] = new Blit(Math.random()*800,Math.random()*400,10,10);
  blitx[i].vx = Math.random()*5-2.5;
  blitx[i].vy = Math.random()*5-2.5;
}
function framedraw(){
  c.strokeStyle='ddd';
  c.clearRect(0,0,800,400);
  for(var i = 0;i<100;i++){
    if(i>0){
      c.beginPath();
      c.moveTo(blitx[i-1].x,blitx[i-1].y);
      c.lineTo(blitx[i].x,blitx[i].y);
      c.stroke();
      c.closePath();
    }
  }
  for(var i = 0;i<100;i++){
  blitx[i].draw();
  }
}
c.fillStyle = '#000';
c.fillRect(0,0,20,20);

function Blit(x,y,w,h){
  this.x = x;
  this.y = y;
  this.vx = 0;
  this.vy = 0;
  this.color = palette[Math.floor(Math.random()*3)];
  this.w = w;
  this.h = h;
  this.draw = function(){
    this.x += this.vx;
    if(this.x>800 || this.x<0) this.vx *= -1;
    this.y += this.vy;
    if(this.y>400 || this.y<0) this.vy *= -1;
    c.moveTo(this.x-this.w*0.5,this.y+this.h*0.5);
    c.beginPath(); c.lineTo(this.x,this.y-this.h*0.5);
    c.lineTo(this.x+this.w*0.5,this.y+this.h*0.5);
    c.lineTo(this.x-this.w*0.5,this.y+this.h*0.5);
    c.closePath();
    c.fillStyle= this.color;
    c.fill();
  };
 };