Mondrian Art in CSS From 5 Code Artists

Mondrian is famous for paintings with big thick black lines forming a grid, where each cell is white, red, yellow, or blue. This aesthetic pairs well with the notoriously rectangular web, and that hasn’t gone unnoticed over the years with CSS developers. I saw some Mondrian Art in CSS going around the other day and figured I’d go looking for others I’ve seen over the years and round them up.

Vasilis van Gemert:
What if Mondrian used CSS instead of paint?

Many people have tried to recreate a work of art by Mondriaan with CSS. It seems like a nice and simple exercise: rectangles are easy with CSS, and now with grid, it is easy to recreate most of his works. I tried it as well, and it turned out to be a bit more complicated than I thought. And the results are, well, surprising.

Screenshot of a webpage with a large serif font in various sizes reading What if Mondrian Used CSS instead of Paint? above two paragraphs discussing Mondrian Art in CSS.

Jen Simmons Lab:
Mondrian Art in CSS Grid

I love how Jen went the extra mile with the texture. Like most of these examples, CSS grid is used heavily.

Mondrian Art in CSS Grid from Jen Simmons. Includes rough grungy texture across the entire piece.

Jen Schiffer:
var t;: Piet Mondrian

I started with Mondrian not because he is my favorite artist (he is not), or that his work is very recognizeable (it is), but because I thought it would be a fun (yes) and easy start (lol nope) to this project.

Mondrian Art in CSS randomized 12 times in a 4 by 3 grid of boxes. A bright yellow header is above the grid bearing the site title: var t.

Riley Wong:
Make Your Own Mondrian-Style Painting with Code

There is a 12-step tutorial on GitHub.

Adam Fuhrer:
CSS Mondrian

Generative Piet Mondrian style art using CSS grid.

Screenshot of a full page Mondrian art example. There is a refresh button centered at the bottom of the page.

John Broers:
CSS Mondriaan Grid

An example of Mondrian Art in CSS with a "Generate New" option. The example is a square box with plenty of padding around it on the white background page.

Mondrian Art in CSS From 5 Code Artists originally published on CSS-Tricks. You should get the newsletter and become a supporter.

Source link

I made my own gallery

I made my own gallery of demos. You can check them at

I’ve experimented stuff after reading about it. I also use this URL to host demos for GitHub repositories.

Topics are quite random and fun (at least, for me 🤷‍♂️). Be careful though, it’s absolutely not the place to learn best practices!

I may have broken some of them 🤬.

Photo by Alex Kondratiev on Unsplash

Source link

Divtober Day 30: Contrast

Again, I forgot to publish this yesterday, when the word was “Contrast.” I did two drawings:

The first one was a basic “logo” showing the word “contrast” with the contrast symbol (kind of):

The second one was an animated drawing showing the contrast between the summer and winter season on the same landscape (slide right and left to see the changes):

Unfortunately, this last one won’t work for Firefox users, who will only see the static winter landscape and won’t be able to interact with it.

Source link

Divtober Day 24: Smelly

The word of the day for divtober is “smelly.” So here’s a smelly trash can with boxes and bags around it:

Also, childish me did another demo yesterday for divtober #23 (loud) and #24 (smelly) together… it is tongue-in-cheek and inappropriate, and I’d recommend you check your speakers before you click on it 😉

It uses a single element (<audio>) and it plays the sound on click (I had to cheat a little and add some inline JavaScript code: onclick=""). The controls are hidden on desktop, although some browsers will display them (looking at Safari/Chrome on iOS). Also, it is animated on Chromium providing some movement on focus.

Without further ado, here is an inappropriate demo for divtober #23 and #24:

Source link

Divtober Day 5: Tired – DEV Community

This is my entry for #divtober day 5. The word is “Tired”, so I drew a cartoon of a man with a tired look on his face.

As with the previous drawing, it is animated… but it will only work on Chrome (for now). I don’t fully like the hair. Curly hair looks a bit nicer, but this made it simpler to code 😳

Initially, I thought about making a bicycle because it is “tired”. But in the end, I opted for the easy solution.

Source link

Using a greedy randomized algorithm to create art

The greedy randomized adaptive search procedure (also known as GRASP) is a metaheuristic algorithm commonly applied to combinatorial optimization problems in which each iteration consists basically of two phases: construction and local search. The construction phase builds a feasible solution, whose neighborhood is investigated until a local minimum is found during the local search phase.

First, the darkest pixel is found. Then a number of random lines are drawn through that point, and the pixel values along each line are added together. The line with the darkest average is chosen, and the value of that line is subtracted from the image. Then the whole process is started over again for however many lines we are drawing.

By the nature of the algorithm, the optimal line drawing configuration is probably not achieved, but performance is far superior to the naive method of checking every line.

Source link