Day 19. When art meets code 🎨💻
Piet Mondrian reduced visual language to primary colors, straight lines, and right angles. I wondered: what if code painted the same way?
This experiment generates Mondrian-style compositions using Perl and CSS Grid, with a strict constraint: no JavaScript, no canvas, no SVG. Just HTML5 and CSS.
CSS Grid turned out to be a perfect match for Mondrian’s aesthetic. Rectangular subdivisions, precise alignment, clean edges. Each colored block becomes a grid cell, black lines are grid gaps, and the composition emerges from structure rather than drawing.
I wrote a Perl script to generate random layouts through recursive subdivision, then output pure HTML with inline styles. CSS variables handle colors, grid areas handle composition, and calc() manages proportions. The result loads in about 3KB, works in every modern browser, and is fully readable by simply viewing the source.
Sometimes the simplest tool is the most powerful one.
Code: mondrian-html-only on GitHub
The project
| Piece | Role |
|---|---|
| Constraint | No JS, no canvas, no SVG |
| Perl | Recursive subdivision → random layouts |
| CSS Grid | Cells = color blocks; gaps = black lines |
| Output | Pure HTML + inline styles (~3KB) |
Note from campaign draft (optional depth)
An earlier draft asked how much randomness you can add before balance breaks, and what rules make a composition feel “Mondrian.” Generative art here is translation: aesthetic principles into algorithms, not a replica of a painting.
How to follow
- Blog: blog.maptheclouds.com
- LinkedIn: Day 19 post
- Code: github.com/alexaac/mondrian-html-only
- Previous: Day 18 – Clickable Bubbles
- Hashtag: #100DayMapChallenge
#100DayMapChallenge · Day 19/100 · Mondrian / Perl + CSS Grid · LinkedIn
Previous: Day 18: Clickable Bubbles – OSM
Next: Day 20: Charts Hairball