Kiln
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 margin = 45;
var oranges = ['#E2621B', '#F07818', '#C94A17', '#EF8B2C', '#D95A0F'];
s.rect(0, 0, width, height).attr({fill: '#F2EAE0'});
var grid = intVariable('Grid', 2, 4);
var density = intVariable('Density', 55, 95);
var drift = intVariable('Drift', 10, 55);
var cell = (width - margin * 2) / grid;
function pick() {
return oranges[getRandomInt(0, oranges.length - 1)];
}
function shift() {
return getRandomArbitary(-cell * drift / 100, cell * drift / 100);
}
function triangle(cx, cy, r) {
var up = getRandomInt(0, 1) === 1 ? 1 : -1;
return s.polygon([
cx, cy - r * up,
cx - r, cy + r * up,
cx + r, cy + r * up
]);
}
var cells = [];
for (var row = 0; row < grid; row++) {
for (var col = 0; col < grid; col++) {
if (getRandomInt(0, 99) < density) {
cells.push([col, row]);
}
}
}
// never let a variant come out nearly empty
while (cells.length < 3) {
cells.push([getRandomInt(0, grid - 1), getRandomInt(0, grid - 1)]);
}
for (var i = 0; i < cells.length; i++) {
var r = cell / 2 * getRandomArbitary(0.8, 1.25);
var cx = margin + cell * cells[i][0] + cell / 2 + shift();
var cy = margin + cell * cells[i][1] + cell / 2 + shift();
var shape = getRandomInt(0, 1) === 1
? s.circle(cx, cy, r)
: triangle(cx, cy, r);
shape.attr({fill: pick(), fillOpacity: getRandomArbitary(0.7, 0.9)});
}
Copyright © 2014–2026 Kevin Marsh. All rights reserved. Questions? Comments? hello@variart.io