Poul Gernes was a very colorful danish artist, furniture designer, and founder of an art school. He caused quite a stir back in 1989, where he turned a famous, white-washed cinema in Copenhagen, The Palace, into something very colorful:

It was not to everybody's taste — but now, more than 30 years after, it's a national treasure. And while the owner wants to renew it, many people think the building should be protected.

In 2016, 20 years after Gernes passed away, a retrospectve exhibition was held at the famous danish art museum, Louisiana:

I had completely forgotten about Gernes' "dot-paintings" — so when I saw this poster the other day, I just had to re-create it! It's so simple, yet hypnotic and beautiful.

Let's code an interactive version of it!

Coding Gernes

The poster is a simple 6-column grid within a container, using cqi-values, so it's responsive.

The size of the dots require a little bit of math:

The black frame around the poster is 1.25cqi, the padding within is 1cqi, and the gap between the 6 cells is also 1 cqi. That's 2 × 1.25 + 2 × 1 + 5 × 1 — a total of 9.5cqi.

Since the container is 100cqi, that leaves 90.5cqi for the dots — so each dot is:

 --sz: calc(90.5cqi / 6);

Making it interactive

Wouldn't it be great if you could click on each color, and change it?

We can do that with <input type="color"> — styled a bit, of course:

input {
  --sz: calc(90.5cqi / 6);
  background: transparent;
  border: 0;
  border-radius: 50%;
  height: var(--sz);
  padding: 0;
  width: var(--sz);
  &::-webkit-color-swatch,
  &::-webkit-color-swatch-wrapper {
    border: 0;
    border-radius: inherit;
    padding: 0;
  }
}

Next, the grey lines crossing the middle of the painting. For these, we'll use two linear-gradients:

fieldset {
background-image: 
  linear-gradient(90deg, transparent 50%,
  var(--line, #DFDFD1) calc(50% - 2px),
  transparent calc(50% + 2px)),
  linear-gradient(180deg, transparent 50%,
  var(--line, #DFDFD1) calc(50% - 2px),
  transparent calc(50% + 2px));
}

I think the main font on the poster is Gotham by Hoefler & Co. Gotham is similar to Paul Renner's Futura, so I searched for a free font resembling Futura, and ended up with Jost.

The font-size was also specified with cqi-units, and — voilà — we have an interactive Gernes-poster:

When clicking on a dot, you'll see your browser's built-in color-picker:

While prepearing for this article, I googled Gernes, and found another variant of the dot-painting above:

With a small JavaScript-snippet, we can easily update the existing poster by iterating all the <input type="color"> and set a new value from an array of colors:

const dots = [
'#006951', '#005F64', '#005192', '#D5D111', '#59AF49', '#008956',
'#A43251', '#B32A39', '#DB2832', '#2F5295', '#52589B', '#7B547D',
'#FD9026', '#FFC11C', '#F7CF00', '#D9352C', '#E64B2D', '#F4682B',
'#35714D', '#B84F59', '#0D0D0D', '#00A6A2', '#58221A', '#E4DFD4',
'#213D1E', '#635B9F', '#2F2D33', '#376470', '#2C1911', '#BE321E',
'#984618', '#003548', '#737373', '#AC4E76', '#0089C0', '#666224'
]

And then simply:

dots.forEach((dot, index) => 
  app.elements[index].value = dot
)

Let's also update the background and lines:

app.style.cssText = '--bg: #1F375E; --line: #596376;'

... and we get:

Demo

Here's a Codepen. You can click on the toggler below the poster to toggle between the two versions we've created in this tutorial. And you can click on each dot to change it's color. I hope you'll have fun creating your own take on a Gernes dot-poster!