I think I speak for most people when I say, studying history can sometimes be a bit dull. This is exactly how I felt during my studies at university while working through my Bachelors of Fine Arts. I used to have three hour long Art History lectures in this 300 – 400 person auditorium and as you can imagine, most students were not always awake for the entire class. Looking back at the time now, there are moments where I am thankful to have learned about some artists, movements, and groups that I can reference in my work or every day conversation. But unfortunately and expectedly, there are some things I learned that I no longer reference.

I also imagine it to be difficult to always reflect back towards the history of art in many current practices as we only seem to be propelling forwards into the depths of the never ending internet. An interesting point is that it is in good practice for many artists and creators to reference those that have come before. An even more interesting point is those who achieve this while simultaneously pushing the boundaries of fine art forwards into the digital world.

Diana Smith is a UI Engineer. On her website she states that she is a CSS Expert, and in my opinion this is 100% right. Her piece “Pure CSS Francine” is a hand made code-drawing of a classic 1800s oil painting portrait. It is hard to believe for any experienced coder or programmer that this portrait was built solely with HTML and CSS. But it was. Each individual element of Pure CSS Francine was created without any kind of illustration programs or tools. This means that what we see in our browser is made up completely of code and is displayed in real time.

Because of this you cannot simply save a photo of Pure CSS Francine (aside from making a screen shot); alternatively, Smith has made the code for PCF available to the public. In her github directory she states, “Pure CSS Francine – An ongoing series in which I create art using only CSS and HTML”. She goes onto to list her rules in which she must work within:

  1. All elements must be typed out by hand
  2. Only Atom text editor and Chrome Developer Tools allowed
  3. SVG use is limited, and all shapes can only use hand-plotted coordinates and bezier curves – without the aid of any graphics editor. (Note: at one point I was using one or two SVG elements but I eventually grew tired of them and they’ve since been deleted, so this rule no longer applies. No offence to SVG.)

The boundaries Smith has set for herself seem quite confined when it comes to thinking about programming and coding an 1800’s oil painting. And yet, we see these boundaries turned on their heads in the result of PCF.

I personally believe this piece alone is impressive, but as coders we know that HTML and CSS can look very different in older or other browsers – because of the nature of how the code is read and then displayed. Smith does comment, “Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything other than chrome.”. Naturally, the people of the Internet opened PCF in different browsers to see the different results. When opened in an older version of Opera we see PCF transform into a melting Salvador Dali-esque portrait.

In Netscape Navigator we see her render into a Pablo Picasso cubist portrait.

These transformations speak to the history of art. What’s curious is that these transformations are also in direct correlation with the history of the Internet, as Smith points out, “It’s like a mood ring”. Smith’s practice revolves around a lot of trial and error, when asked why she makes these CSS images she replies,

“There’s no good reason other than fun, just because, and art”.

Isn’t that a beautiful perspective of creating fine art in a digital world? Personally, I am excited to see what is next for Smith and other artists alike.

Quotes and some details cited from this Motherboard article.

Leave a Reply

Your email address will not be published. Required fields are marked *