A CodePen by Val Head. Geometric Pattern Mask - CSS mask over a canvas pattern. Yay, masks!

index.html

<div class="wrap">
  <div>
    <canvas id="type" width="655" height="125" />
</div>
<div class="shadow"></div>
</div>

script.js

var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight,
		HALF_WIDTH = window.innerWidth / 2,
		HALF_HEIGHT = window.innerHeight / 2;
		

var colours =["rgba(255,162,153,.4)","rgba(236,252,142,.5)","rgba(157,248,180,.5)","rgba(151,241,153,.5)"],
squares=[],
MAX_SQUARES = 10;
			
var count=0,
		width=30,
		sX =0,
		sY =0,
    canvas, 
    c;

setupCanvas();		

function setupCanvas() {
  canvas = document.getElementById("type");
  c = canvas.getContext("2d");
  draw();
}
					
function draw() {					
  MAX_SQUARES = (SCREEN_WIDTH/width) * (SCREEN_HEIGHT/width); 
			
for (i=0; i<MAX_SQUARES; i++){
  sX = width *count;

  if (count > SCREEN_WIDTH/width) {
	  count =0;
		sX = 0
		sY = sY + width;
	}
				
var s = new SplitSquare(sX,sY,width);
squares.push(s);
 s.colour01 = colours[Math.round(randomRange(0,3))];
s.colour02 = colours[Math.round(randomRange(0,3))];
s.render(c);

count ++;
}
				
			
count =0;
setInterval(loop, 1000 / 10);

}
		
function loop () {

  for (i=0; i<MAX_SQUARES; i++){ 
    s=squares[i];
		s.colour01 = colours[Math.round(randomRange(0,3))];
		s.colour02 = colours[Math.round(randomRange(0,3))];
		s.render(c);
	}
		}
	
						
function randomRange(min, max) {
  return ((Math.random()*(max-min)) + min); 
}
		
function SplitSquare(posx, posy, size) {

		this.posX = posx; 
		this.posY = posy;
		
		this.size = size;
		this.colour01;
		this.colour02;

	
	this.render = function(c) {

		c.fillStyle = this.colour02;		
	
		c.save();
		c.translate(this.posX, this.posY);
		
		c.beginPath();
		c.moveTo(0, 0);
		c.lineTo(0, this.size);
		c.lineTo(this.size,this.size); 
		c.closePath();
		c.fill();
		
		
		c.fillStyle = this.colour01;
		c.beginPath();
		c.moveTo(0,0);
		c.lineTo(this.size, 0);
		c.lineTo(this.size, this.size); 
		c.closePath();
		c.fill();
		
		c.restore();

	};

}

style.css

body {
  background: #2e292e;
  margin: 0;
  text-align:center;
}

#type {
  background:#f8fc8e;
	-webkit-mask-image: url('https://dl.dropbox.com/u/1143870/geometric.png');
  -webkit-mask-repeat: no-repeat;
	position:absolute;
	top:0;
	left:0;
}
		
.wrap {
  position:relative; width:655px; margin:2em auto; }
		
.shadow {
  width:655px;
	height:125px;
	background:url('https://dl.dropbox.com/u/1143870/geo_innershadow.png') top left no-repeat;
	position:absolute;
	top:0
	left:0;
			
		}