DEV Community

Cover image for In the Footsteps of Poul Gernes — Making an Interactive Art Poster
Mads Stoumann
Mads Stoumann

Posted on

In the Footsteps of Poul Gernes — Making an Interactive Art Poster

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

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

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);
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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));
}
Enter fullscreen mode Exit fullscreen mode

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:

Light Version

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

Gernes Color Picker


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

Blue background dots


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'
]
Enter fullscreen mode Exit fullscreen mode

And then simply:

dots.forEach((dot, index) => 
  app.elements[index].value = dot
)
Enter fullscreen mode Exit fullscreen mode

Let's also update the background and lines:

app.style.cssText = '--bg: #1F375E; --line: #596376;'
Enter fullscreen mode Exit fullscreen mode

... and we get:

Gernes Blue Background Dots


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!

Top comments (10)

Collapse
 
tigt profile image
Taylor Hunt

You could get the rounded corners to work in Firefox too with ::-moz-color-swatch

Collapse
 
madsstoumann profile image
Mads Stoumann

I didn’t do a Firefox-version, as I’m using nesting and other stuff, that’s not supported in FF yet!

Collapse
 
tigt profile image
Taylor Hunt

Ah, serves me right for using FF Nightly. It looks almost perfect there, but with square swatches.

Thread Thread
 
madsstoumann profile image
Mads Stoumann

I’ll install FF nightly tomorrow and look into it!

Thread Thread
 
madsstoumann profile image
Mads Stoumann

Fixed!

Thread Thread
 
tigt profile image
Taylor Hunt

Yep, looks great!

Collapse
 
idosius profile image
Ido Schacham

Super duper cool, well done! Keep 'em coming

Collapse
 
madsstoumann profile image
Mads Stoumann

Working on this:
Wall art

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
mxglt profile image
Maxime Guilbert

Really nice!