Generated SVG Illustration
The Institute for Logic, Language and Computation (ILLC) in Amsterdam asked for an illustration to accompany their article about diversity at the university and their institute.
To illustrate this I wanted to show a diverse group of people, who become more and more diverse from the left to the right in the illustration. To achieve diversity in the illustration I needed many variations of these characters. Something which would be a time-consuming task to do by hand.
I never let a reason to program pass, so I went the automated way. My goal was to create a grid of SVG illustrations of people to which particular colour scheme would be randomly applied.
I started by illustrating some characters in Figma and exported them as SVG.
Some colour schemes definitions.
| Background | ||||
| Body | ||||
| Hair | ||||
| Shirt |
To create the variability I was looking for, I applied these colour schemes to the illustrated characters.
Changing the colour scheme can be done in retrospect as SVGs can be adjusted
after they have been rendered on the page. In this case I use
document.querySelector to select the different elements and give them a
different colour:
const shirt = svg.querySelector("#shirt");
shirt.setAttribute("fill", "#F9615F");
The same way other adjustments can be made, for example flipping the characters in a randomized fashion.
svg.style = `transform-origin=center; transform:scaleX(${
Math.random() > 0.5 ? -1 : 1
})`;
Repeating these variations on a grid gives a nice composition.
Refresh the page to see the illustration change.