Binary
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 v = (typeof v === 'undefined') ? Date.now() : v;
var binary = parseInt(v, 10).toString(2).substr(-18).padStart(18, "0");
var colors = ["#1D3240", "#FFE069", "#35D6B8", "#D45580", "#513794", "#3EACE3"];
var shuffled = [...colors].sort(() => 0.5 - Math.random());
// so we never have the same background and text colors
var background = shuffled[0];
var text = shuffled[1];
s.rect(0, 0, width, height).attr({ fill: background })
var zero = "M86.1328 48.5859V125.148C86.1328 157.049 71.7773 173 43.0664 173C14.3555 173 0 157.049 0 125.148V48.5859C0 16.6849 14.3555 0.734375 43.0664 0.734375C71.7773 0.734375 86.1328 16.6849 86.1328 48.5859ZM43.0664 153.859C59.0169 153.859 66.9922 144.289 66.9922 125.148V48.5859C66.9922 29.4453 59.0169 19.875 43.0664 19.875C27.1159 19.875 19.1406 29.4453 19.1406 48.5859V125.148C19.1406 144.289 27.1159 153.859 43.0664 153.859Z";
var one = "M54.6369 164.5C54.6369 170.88 51.4468 174.071 45.0666 174.071C38.6864 174.071 35.4963 170.88 35.4963 164.5V32.4299L17.9826 47.7424C12.2404 52.719 7.16816 52.7509 2.76582 47.8381C-1.57272 42.9892 -0.807096 37.9169 5.0627 32.6213L40.2814 1.61352C42.9611 -0.364344 46.0236 -0.523849 49.4689 1.13501C52.9143 2.79386 54.6369 6.20727 54.6369 11.3752V164.5Z";
var scale = 0.6;
var spacing = 60;
var margin = 40;
var oneKerning = 25;
var digits = s.g();
var y = 50;
var i = 0;
function zeroOrOne(character) {
return character == "1" ? one : zero;
}
for (var x = 1; x <= 6; x++) {
var kern = binary[i] == "1" ? oneKerning : 0;
digits.add(s.path(zeroOrOne(binary[i])).attr({ fill: text }).transform(`s${scale} t ${margin + kern + (x*spacing) + (x-1) * margin},${y}`));
i++;
}
var y = 270;
for (var x = 1; x <= 6; x++) {
var kern = binary[i] == "1" ? oneKerning : 0;
digits.add(s.path(zeroOrOne(binary[i])).attr({ fill: text }).transform(`s${scale} t ${margin + kern + (x*spacing) + (x-1) * margin},${y}`));
i++;
}
var y = 490;
for (var x = 1; x <= 6; x++) {
var kern = binary[i] == "1" ? oneKerning : 0;
digits.add(s.path(zeroOrOne(binary[i])).attr({ fill: text }).transform(`s${scale} t ${margin + kern + (x*spacing) + (x-1) * margin},${y}`));
i++;
}
digits.transform("s0.9 t-0,0")
Copyright © 2014–2025 Kevin Marsh. All rights reserved. Questions? Comments? hello@variart.io