Span tag paintings

My pal Chris is artist always experimenting with new mediums. He was excited to find that if instead of a traditional canvas, you were to use a web browser, and instead of paints and paintbrushes, you were to use HTML span tags, you’d get an interactive image resembling 8-bit artwork. What the heck is that? Here’s the Mono Lisa, for example:


Note how the appearance changes dramatically if you resize the browser. Span tag paintings are responsive.

In trying to create a photorealistic span painting of President Barrack Obama, Chris found that it was a rather tedious process. Thanks, Obama! I told Chris that using PHP I could teach a computer to make these paintings faster than he could. He was thrilled when my script produced the following image before he could finish his painting.

Screen Shot 2015-03-28 at 6.52.27 PM

I then extended my script into this neat Backbone.js app, allowing Chris to upload any image which would automatically be changed into an HTML painting. I even built a color picker so you could limit the colors in your painting to a pallet of your choosing. Here is an image of acclaimed painter Bob Ross which was produced by script. Screen Shot 2015-03-28 at 6.56.01 PM

I’m glad that Chris made these paintings.  You can see some of his favorites here. I like how you can make different patterns by resizing the window, and then BOOM! the image jumps out at you as soon as you find the right size. We also discovered that image will repeat itself at regular intervals.


Pretty good. Pretty neat. Please reply with your own painting.

Powered by

Up ↑