Jitter Squares

to generate a new and unique variation

Source Code

Every variart piece is open source, you can see exactly how it is drawn from the code.

var backgroundColor = '#FEF9E6';
var colors = ['#EF5D3B', '#A8D6C1', '#1E2D28', '#D2BC90'];
var squareSize = 45;

s.rect(0, 0, width, height).attr({fill: backgroundColor});

for (var x = 0; x <= width; x += squareSize){
  for (var y = 0; y <= height; y += squareSize){
    // 80% chance we draw a square here
    if (getRandomInt(0, 100) < 80){
      s.rect(x + getRandomInt(-5, 5), y + getRandomInt(-5, 5), squareSize, squareSize).attr({fillOpacity: 0.8, fill: colors[getRandomInt(0, colors.length - 1)]})
    }
  }  
}