Animated Canvas Patterns: http://jsbin.com/fidog/18/edit?html,css,js,output

app.js

(function(){
  
  /////////////////////////////////
  // Viewport
  /////////////////////////////////
  var vcvs = document.createElement("canvas");
  var vctx = vcvs.getContext('2d');
  vcvs.width=480;
  vcvs.height=480;
  document.body.appendChild(vcvs);

  // Break
  document.body.appendChild(document.createElement("br"));
  
  /////////////////////////////////
  // Pattern 1
  /////////////////////////////////
  var pcvs = document.createElement("canvas");
  var pctx = pcvs.getContext('2d');
  pcvs.width=20;
  pcvs.height=20;
  //document.body.appendChild(pcvs);
  var renderPattern1 = function () {  
    pctx.strokeStyle = '#0cf';
    pctx.moveTo(0, 0);
    pctx.lineTo(20, 20);
    pctx.moveTo(10, 0);
    pctx.lineTo(20, 10);
    pctx.moveTo(0, 10);
    pctx.lineTo(10, 20);
    pctx.stroke();
  };
  renderPattern1();

  /////////////////////////////////
  // Pattern 2
  /////////////////////////////////
  var p2cvs = document.createElement("canvas");
  var p2ctx = p2cvs.getContext('2d');
  p2cvs.width=40;
  p2cvs.height=40;
  //document.body.appendChild(p2cvs);
  var renderPattern2 = function () {
    p2ctx.strokeStyle = '#0cf';
    p2ctx.lineWidth = 3;
    p2ctx.globalAlpha = 1;
    
    //p2ctx.moveTo(0, 10); p2ctx.lineTo(30, 40);
    p2ctx.moveTo(-10, 10); p2ctx.lineTo(30, 50);
    //p2ctx.moveTo(0, 30); p2ctx.lineTo(10, 40);
    //p2ctx.moveTo(0, 0); p2ctx.lineTo(40, 40);
    //p2ctx.moveTo(30, 0); p2ctx.lineTo(40, 10);
    p2ctx.moveTo(10, -10); p2ctx.lineTo(50, 30);
    //p2ctx.moveTo(10, 0); p2ctx.lineTo(40, 30);
    p2ctx.stroke();
  };
  renderPattern2();

  
  /////////////////////////////////
  // Pattern 3
  /////////////////////////////////
  var p3cvs = document.createElement("canvas");
  var p3ctx = p3cvs.getContext('2d');
  p3cvs.width=80;
  p3cvs.height=80;
  //document.body.appendChild(p3cvs);
  var renderPattern3 = function () {
    var x, y, radius, startAngle, endAngle, counterClockwise;
    p3ctx.strokeStyle = '#f40';
    p3ctx.lineWidth = 6;
    p3ctx.globalAlpha = 1;
    
    //Arc 1
    x = 0;
    y = 80;
    radius = 40;
    startAngle = 1.5 * Math.PI;
    endAngle = 0 * Math.PI;
    counterClockwise = false;
    p3ctx.beginPath();
    p3ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    p3ctx.stroke();

    //Arc 2
    x = 80;
    y = 0;
    radius = 40;
    startAngle = -1.5 * Math.PI;
    endAngle = 0 * Math.PI;
    counterClockwise = false;
    p3ctx.beginPath();
    p3ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    p3ctx.stroke();
  };
  renderPattern3();



  /////////////////////////////////
  // Pattern 4
  /////////////////////////////////
  var p4cvs = document.createElement("canvas");
  var p4ctx = p4cvs.getContext('2d');
  p4cvs.width=160;
  p4cvs.height=160;
  //document.body.appendChild(p4cvs);
  var renderPattern4 = function () {
    var x, y, radius, startAngle, endAngle, counterClockwise;
    p4ctx.strokeStyle = '#ff4';
    p4ctx.lineWidth = 6;
    p4ctx.globalAlpha = 1;

    // Arc 1
    x = 0;
    y = 160;
    radius = 80;
    startAngle = 1.5 * Math.PI;
    endAngle = 0 * Math.PI;
    counterClockwise = false;
    p4ctx.beginPath();
    p4ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    p4ctx.stroke();

    //Arc 2
    x = 160;
    y = 0;
    radius = 80;
    startAngle = -1.5 * Math.PI;
    endAngle = 0 * Math.PI;
    counterClockwise = false;
    p4ctx.beginPath();
    p4ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    p4ctx.stroke();
    
    //Dot
    x = 130;
    y = 30;
    radius = 10;
    startAngle = 2 * Math.PI;
    endAngle = 0 * Math.PI;
    counterClockwise = false;
    p4ctx.beginPath();
    p4ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    p4ctx.fillStyle = '#ff4';
    p4ctx.fill();
    p4ctx.stroke();
    
    x = 30;
    y = 130;
    radius = 3;
    startAngle = 2 * Math.PI;
    endAngle = 0 * Math.PI;
    counterClockwise = false;
    p4ctx.beginPath();
    p4ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    p4ctx.fillStyle = '#ff4';
    p4ctx.fill();
    p4ctx.stroke();     
  };
  renderPattern4();







  var getRandomInt = function (min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
  };

  var clear = function () {
   vctx.clearRect(0, 0, vcvs.width, vcvs.height);
  };

  var render = function (viewport, sources) {
    var i,x,y,w,h,rotate;
    sources = sources || [];

    vw = viewport.width;
    vh = viewport.height;
    viewportctx = viewport.getContext('2d');

    clear();

    //Use each given canvas pattern
    for (i=0; i<sources.length; i++) {
      if (sources[i].tagName === "CANVAS"){
        w = sources[i].width;
        h = sources[i].height;

        // Repeat Canvas on grid, rotating randomly
        for (ii=0; ii<(vh/h); ii++) {
          y = ii * h;
          for (iii=0; iii<(vw/w); iii++) {
            x = iii * w;
            rotate = Math.PI / 2 * getRandomInt (0, 300);
            viewportctx.save();
            viewportctx.translate( x+(w/2), y+(h/2) );
            viewportctx.rotate( rotate );
            viewportctx.translate( -1 * (x+(w/2)),  -1 * (y+(h/2)) );
            viewportctx.drawImage( sources[i], x, y );
            viewportctx.restore();
          }
        }
      }
    }

    viewportctx.strokeStyle = '#ccc';
    viewportctx.lineWidth = 0;
    viewportctx.globalAlpha = 0.8;    
    viewportctx.beginPath();
    viewportctx.arc(32, 452, 20, 2 * Math.PI, 0 * Math.PI, false);
    viewportctx.fillStyle = '#ccc';
    viewportctx.fill();
    viewportctx.stroke();     
    viewportctx.globalAlpha = 1;       
    viewportctx.font = '20pt Helvetica';
    viewportctx.fillStyle = '#fff';
    viewportctx.fillText('ev', 18, 460);    
  };
  
  var layers = [p3cvs, pcvs, p2cvs, p4cvs];
  vcvs.addEventListener('click', function(){
      render(vcvs, layers);
  });
  
  setInterval(function(){render(vcvs, layers);}, 100);
  render(vcvs, layers);
  
  var btn1 = document.getElementById('option1');
  var btn2 = document.getElementById('option2');
  var btn3 = document.getElementById('option3');
  var btn4 = document.getElementById('option4');
  btn1.addEventListener('click', function (){layers = [p3cvs, pcvs, p2cvs, p4cvs];});
  btn2.addEventListener('click', function (){layers = [p2cvs, p4cvs];});
  btn3.addEventListener('click', function (){layers = [pcvs, p3cvs];});
  btn4.addEventListener('click', function (){layers = [p2cvs, pcvs];});
}());

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input id='option1' type='button' value='option1'>
  <input id='option2' type='button' value='option2'>
  <input id='option3' type='button' value='option3'>
  <input id='option4' type='button' value='option4'>
  <br />
</body>
</html>

style.css

canvas {
  border: 1px #ccc solid;
  background: #445;
}