3D Cubes

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.

s.rect(0, 0, width, height).attr({fill: '#E2DBB4'})

var green = Snap.format('hsl({h}, .45, .45)', {h: getRandomArbitary(0, 1)});
var gray = 'hsl(.12, .15, .5)';
var shadow = 'hsl(.12, .15, .3)';

console.log(Snap.rgb2hsl(145, 162, 61))

for (var x = -1; x < 4; x++){
  for(var y = -1; y < 4; y++){
    var front = s.rect(75, 75, 100, 100).attr({fill: green})
    var face = s.polygon([75, 75], [175, 0], [275, 0], [175, 75]).attr({fill: gray})
    var shadow = s.polygon([175, 175], [175, 75], [275, 0], [275, 100]).attr({fill: shadow})
    
    var g = s.g(front, face, shadow);
    
    g.transform(Snap.format('t{x},{y}', {x: x * 150, y: y * 200}))
  }
}