Mondrian Art in CSS From 5 Coders | CSS-Tricks


Mondrian is well-known for paintings with huge thick black lines forming a grid, where each cell is white, red, yellow, or blue. This visual sets well with the infamously rectangle-shaped web, which hasn’t gone undetected throughout the years with CSS designers. I saw some Mondrian Art in CSS walking around recently and figured I’d go trying to find others I’ve seen throughout the years and round them up.

Vasilis van Gemert:
What if Mondrian utilized CSS rather of paint?

Many individuals have actually attempted to recreate an artwork by Mondriaan with CSS. It appears like a good and easy workout: rectangular shapes are simple with CSS, and now with grid, it is simple to recreate the majority of his works. I attempted it too, and it ended up being a bit more complex than I believed. And the outcomes are, well, unexpected.

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 like how Jen went above and beyond with the texture. Like the majority of these examples, CSS grid is utilized greatly.

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

Jen Schiffer:
var t;: Piet Mondrian

I began with Mondrian not due to the fact that he is my preferred artist (he is not), or that his work is extremely recognizeable (it is), however due to the fact that I believed it would be an enjoyable (yes) and simple start (lol nope) to this job.

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 design art utilizing 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.

Synesy.org