Vasarely in colour

Recreating a painting by Victor Vasarely with CSS.


Victor Vasarely painting from 1963, made up of squares in various shades of grey. Each square contains a coloured circle of a different size.
Victor Vasarely painting, 1963.

It is too complex to do with just CSS. I needed a bunch of class names in the HTML for easier targeting via CSS. I figured out the patterns in the artwork first, convert these into PHP to create the required HTML with class names, and finally adding the CSS. The last part was the easiest.

There are three different patterns:

The result is below. No images, just code. I made a special effort to make this responsive as well, so it should scale nicely wether you're reading this on your phone or your desktop.

This is the demo of the related blog post.

Demo