Terracotta
to generate a new and unique variation
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
});
}
Copyright © 2014–2026 Kevin Marsh. All rights reserved. Questions? Comments? hello@variart.io