In the Footsteps of Poul Gernes — Making an Interactive Art Poster
Tags: css, webdev, showdev, javascript
Published: 2023-07-10 17:19:12

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:

![Palads Cinema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gevz4351a5doc9qqa4w.jpeg)

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:

![Gernes Poster, Louisiana Exhibition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8stuqv98ge4rd8mir5x.jpg)

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:

```css
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-gradient`s:

```css
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](https://fonts.google.com/specimen/Jost). 

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

![Light Version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bzirmsrvcmcppmdqvgav.png)

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

![Gernes Color Picker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0srqv8qu8fr6frz8k6oo.png)

---

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

![Blue background dots](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3if3pb049btqf9zayhr1.jpg)

---

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:

```js
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: 

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

Let's also update the background and lines:

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

... and we get:

![Gernes Blue Background Dots](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bi883fuis4wk6ac4xcib.png)

---

# 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!

{% codepen https://codepen.io/stoumann/pen/ExObpBw %}