Sunday Fun: Re-creating a Radiohead cover

The other day, I read an article about how Radiohead's graphic designer, Stanley Donwood, got inspired by words from billboards — and the combination of the colors red, green, blue, yellow, orange, black and white — for the cover to "Hail to the Thief" by Radiohead.

The cover has much more graphic elements than this, but let's try to mimic the random color-combinations and the texts in CSS and JavaScript.

First, I asked chatGPT to generate an array of a 100 words, inspired by the cover:

const words = ["Fear", "Control", "Truth", "Lies" ...]

Next, I grabbed the primary colors:

const colors = ['#D0001D', '#0D5436', '#093588', '#FDA223', '#F8551A', '#101624', '#EAEFF0'];

A small method returns a random background-color, and makes sure that the text-color is not the same:

function getRandomColorPair() {
  const bgIndex = Math.floor(Math.random() * colors.length);
  let cIndex;
  do {
    cIndex = Math.floor(Math.random() * colors.length);
  } while (cIndex === bgIndex);
  return { bg: colors[bgIndex], c: colors[cIndex] };
}

And finally, the words and colors are added to <li>-tags:

const canvas = document.querySelector('ul');
canvas.innerHTML = words.map(word => {
  const { bg, c } = getRandomColorPair();
  return `<li style="--bg: ${bg};--c: ${c};">${word}</li>`;
}).join('');

Styling

I browsed handwriting fonts on Google Fonts, and found a great match: Pangolin.

Next, a few styles for the <li>-elements:

li {
  background-color: var(--bg);
  color: var(--c);
  font-family: "Pangolin", system-ui, sans-serif;
  font-size: 5cqi;
  letter-spacing: -0.075em;
  padding-inline: 1ch;
  text-transform: uppercase;
}

And ... almost done. Just need a few styles on the <ul>-element:

ul {
  all: unset;
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
}

And we get:

That looks a little bit boring, doesn't it?

Let's add a squiggly SVG-filter:

ul {
  filter: url('#squiggly-0');
}

Note: See the SVG-code for the filter in the CodePen below.

And now we get:

Much better!

Here's the CodePen demo – re-fresh to get new, random color-combinations: