Email Email address Location Postal address Tag Item category Url Web address Phone Phone number Previous Go to the previous item Next Go to the next item Quote This is quote Dribbble Link to Dribbble profile Github Link to Github profile Instagram Link to Instagram profile LinkedIn Link to LinkedIn profile Twitter Link to Twitter profile

Side projects

Vasarely in colour

Recreating a painting by Victor Vasarely with CSS.

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:

Circular snakes with repeating gradient.
A single snail with repeating rainbows.
Different sized and shaped circles.

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.

Side project / 2015

code

Previous pageResponsive data tables

Next pageVasarely in black and white

Interested in working together?

Do you have a project in mind? Get in touch and we can discuss the best solution that will fit your needs.

Get in touch