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: