Posted on Jul 10 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!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:Wouldn't it be great if you could click on each color, and change it? We can do that with — styled a bit, of course:Next, the grey lines crossing the middle of the painting. For these, we'll use two linear-gradients: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 and set a new value from an array of colors:And then simply:Let's also update the background and lines:... and we get: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!Templates let you quickly answer FAQs or store snippets for re-use.You could get the rounded corners to work in Firefox too with ::-moz-color-swatchI didn’t do a Firefox-version, as I’m using nesting and other stuff, that’s not supported in FF yet!Ah, serves me right for using FF Nightly. It looks almost perfect there, but with square swatches.I’ll install FF nightly tomorrow and look into it! Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Diego Chavez - May 31 Shubham Thakur - Jul 3 NDREAN - Jul 3 Sathish Kumar N - Jun 18 Once suspended, madsstoumann will not be able to comment or publish posts until their suspension is removed. Once unsuspended, madsstoumann will be able to comment and publish posts again. Once unpublished, all posts by madsstoumann will become hidden and only accessible to themselves. If madsstoumann is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Mads Stoumann. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag madsstoumann: madsstoumann consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging madsstoumann will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.