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.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at

Up ↑

%d bloggers like this: