This content originally appeared on CSS-Tricks and was authored by Chris Coyier
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.
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.
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.
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.
John Broers:
CSS Mondriaan Grid
Mondrian Art in CSS From 5 Code Artists originally published on CSS-Tricks. You should get the newsletter and become a supporter.
This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Chris Coyier | Sciencx (2022-01-14T18:15:03+00:00) Mondrian Art in CSS From 5 Code Artists. Retrieved from https://www.scien.cx/2022/01/14/mondrian-art-in-css-from-5-code-artists/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.