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 numSquares = intVariable('numSquares', 1, 500);
var strokeWidth = intVariable('strokeWidth', 0, 10);
var angle = intVariable('angle', 0, 360);
var foregroundColors = ["#5fa7bd","#6a882f","#143f9d","#4e88c8","#94ac62","#8dbdc9","#347c8a"];

var squareSize = Math.ceil(width/Math.sqrt(numSquares));

var squares = s.g();

for (var x = 0; x < width; x += squareSize){
  for (var y = 0; y < height; y += squareSize){
    var element = s.rect(x, y, squareSize, squareSize).attr({
      fill: foregroundColors[getRandomInt(0, foregroundColors.length - 1)],
       stroke: '#ffffff',
       strokeWidth: strokeWidth,
    });
    squares.append(element);
  }
}

squares.transform(Snap.format('r{r}s1.5', {r: angle}))