Crossing Lines

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 = '#00b7d0';
var foregroundColor = '#ffffff';
var numberOfLines = 2;
var lineAttrs = {strokeWidth: 20, stroke: foregroundColor, strokeOpacity: 0.9};
var buffer = 10;

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


for (var x = 0; x < numberOfLines; x += 1){
  // vertical lines
  var x1 = getRandomInt(0, width - buffer);
  var y1 = -buffer;
  var x2 = getRandomInt(0, width + buffer);
  var y2 = height + buffer;
  s.line(x1, y1, x2, y2).attr(lineAttrs); 
  
  // horizontal lines
  var x1 = -buffer;
  var y1 = getRandomInt(0, height - buffer);
  var x2 = width + buffer;
  var y2 = getRandomInt(0, height + buffer);
  s.line(x1, y1, x2, y2).attr(lineAttrs);  
}