Up

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 = '#464646';
var foregroundColor = '#f2f2f2';

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

var lineAttributes = {fill: 'none', strokeWidth: 20, stroke: foregroundColor};

var shape = s.g(
  s.polyline(0, 50, 50, 0, 100, 50).attr(lineAttributes),
  s.rect(-10, 43, 200, 15).attr({fill: backgroundColor})
);

// total hack, have to hide this "prototype" arrow
shape.attr({opacity: 0})

function grid(cellWidth, cellHeight, content){
  for(var x = 75; x < width - 75; x += cellWidth){
    for(var y = 85; y < height - 50; y += cellHeight){
      content(x, y); 
    }
  }
}

grid(125, 75, function(x, y){
  shape.clone().attr({opacity: getRandomArbitary(0, 1)}).transform(Snap.format('t{x},{y}', {x: x, y: y}));  
});