​

    window.requestAnimFrame = (function(){

      return  window.requestAnimationFrame  ||

      window.webkitRequestAnimationFrame    ||

      window.mozRequestAnimationFrame       ||

      function( callback ){

        window.setTimeout(callback, 1000 / 60);

      };

    })();

​

    var canvas    = document.getElementById('canvas'),

      ctx       = canvas.getContext('2d'),

      ww        = window.innerWidth,

      wh        = window.innerHeight,

      x         = ww/2,

      height    = wh * (Math.sqrt(3)/2),

      y         = (wh-height)/2,

      triangles = 30,

      colors    = [],

      start     = true,

      speed   = 50;

    canvas.width  = ww;

    canvas.height = wh;

​

    ctx.strokeStyle = "black";

    ctx.lineWidth   = 1;

​

    //Set the shading colors

    for (var i=0;i<=triangles;i++){

      colors[i] = "rgba("+(60+(i*3))+","+(20+(i*3))+","+(80+(i*3))+",1)";

    }

​

    var j = 0, k = 0;

    function draw(){

​

      ctx.clearRect(0,0,ww,wh);

      for (var i=0;i<=triangles;i++){

        //BLACK & WHITE

          // ctx.fillStyle = "white";

          // if(i%2==0){ctx.fillStyle="black";}

​

        //RANDOM COLOR

          ctx.fillStyle = colors[i];

​

        ctx.save();

        ctx.translate( ww/2, wh/2 );

        ctx.rotate(i*j/(-speed*6));

        ctx.translate( -ww/2,-wh/2 );

​

        ctx.beginPath();

        ctx.moveTo(x, y+(i*height/triangles/2));

        ctx.lineTo(x+wh/2-(i*wh/triangles/2), y+height-(i*height/triangles/2));

        ctx.lineTo(x-wh/2+(i*wh/triangles/2), y+height-(i*height/triangles/2));

        ctx.lineTo(x, y+(i*height/triangles/2));

        ctx.fill();

        ctx.stroke();

        ctx.closePath();

        ctx.restore();

      };

​

      j++;

    }

​

​

    (function animloop(){

      requestAnimFrame(animloop);

      if(start)draw();

    })();

​

​

    // document.body.addEventListener("click", function(){

    //  start = !start;

    // });

    document.getElementById("speed").addEventListener("change", function(val){

      speed = Math.round(this.value);

    });

    document.getElementById("download").addEventListener("click", function(){

      start = false;

      document.getElementById("download").href = canvas.toDataURL();

      document.getElementById("download").download = "Triangles.png";

    });