Today I created 10,000 2020 Tokyo Olympic Generated Pictograms. I was inspired by a video talking about pictograms at the olympics over the years.
This one was created in pure HTML / SVG /Javascript.
Process
- Draw the person standing in Illustrator, keeping each limb in a symbol, the knee connecting to the thigh etc.
This was easier said than done, making sure that the origin point of each child symbol was in the correct place so when it was rotated it would stay in place. This was a lot easier back in the good ol' Flash days, but this works in a similar way.
- Export as an SVG.
- Add the SVG to HTML as a template. It just sits in the HTML hidden away.
<template id="person" style="display: none;">
<?xml version="1.0" encoding="utf-8"?>
<svg>
<!-- the svg src -->
</svg>
</template>
<!-- the canvas to draw to -->
<canvas id="canvas" width="1000" height="1000"></canvas>
- And then write some code to randomly rotate / translate parts of the person
const template = document.querySelector('#person');
const content = template.content;
const canvas = document.getElementById('canvas')
const c2d = canvas.getContext('2d');
// rotate the torso
const torso = content.querySelector('#torso2 g');
torso.style.transform = `rotate(${-90+Math.random()*180}deg)`;
// rotate a leg
const legf = content.querySelector('#leg-front g');
legf.style.transform = `rotate(${90+Math.random()*-90}deg)`;
- The hard part was making a copy of what I'd created. This was way more complicated than it should have been, and there is probably an easier way to go about it.
// copy to str
const str = template.innerHTML;
const svg64 = btoa(str);
const b64Start = 'data:image/svg+xml;base64,';
const image64 = b64Start + svg64;
// load
const img = new Image();
img.onload = function() {
const x = i%numX * size;
const y = Math.floor(i/numX)*size;
c2d.drawImage(img, x, y, size, size);
}
img.src = image64;