Terracotta

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 numShapes = intVariable('numShapes', 3, 6);
var numOutlines = intVariable('numOutlines', 0, 3);
var cornerRadius = intVariable('cornerRadius', 0, 70);

var background = '#f2e2cb';
var foregroundColors = ['#b9542a', '#5b7286', '#f4ece0', '#8c4a2f', '#c9743d', '#3f5769'];
var inkColor = '#2b2119';

var margin = 60;
var span = width - margin * 2;

function place(size) {
  return getRandomInt(margin, margin + span - size);
}

function drift(anchor, size) {
  return Math.max(margin, Math.min(margin + span - size, anchor - size / 2 + getRandomInt(-40, 40)));
}

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

for (var i = 0; i < numShapes; i++) {
  var w = getRandomInt(130, 215);
  var h = getRandomInt(130, 215);
  var anchorX = margin + span * (i % 2 ? 0.62 : 0.38);
  var anchorY = margin + span * (i % 3 ? 0.6 : 0.4);
  s.rect(drift(anchorX, w), drift(anchorY, h), w, h, cornerRadius).attr({
    fill: foregroundColors[getRandomInt(0, foregroundColors.length - 1)],
    opacity: getRandomArbitary(0.85, 1)
  });
}

for (var j = 0; j < numOutlines; j++) {
  var ow = getRandomInt(150, 240);
  var oh = getRandomInt(150, 240);
  s.rect(place(ow), place(oh), ow, oh, cornerRadius).attr({
    fill: 'none',
    stroke: inkColor,
    strokeWidth: 1.5
  });
}