Dit sublieme schilderij gemaakt van pure code ziet er in elke browser anders uit

De internetkunst die interfaceontwerper Diana Smith maakt, is waarschijnlijk totaal anders dan alles wat je hiervoor zag. Dat komt omdat je niet naar platte pixeldata kijkt die van een server wordt opgehaald, maar naar pure code die live is gerenderd.

Smiths Pure CSS Francine , een uitgebreid codekunstwerk in de stijl van olieverfschilderijen uit de 19e eeuw, zorgde er afgelopen week voor dat webontwikkelaars helemaal gek werden op Twitter. Het werk werd niet met een tekentablet of muis gemaakt, en er kwam zelfs geen illustratiesoftware aan te pas. Nee, Smith heeft elk element handmatig in HTML en CSS geprogrammeerd. Dat zijn programmeertalen die je browser vertellen hoe-ie webpagina’s moet weergeven. Dit betekent dat er geen ‘afbeelding’ is om als bestand op te slaan, maar je kunt er wel een screenshot van maken of de code downloaden om er zelf mee te spelen.

Dit maakt Pure CSS Francine en het andere CSS-werk van Smith – zoals deze fantastische jaren-50-advertentie – echt uniek. Omdat het alleen maar bestaat uit de code die een browser vertelt om iets te doen, ziet Francine er in elke browser net wat anders uit. En hoe ouder de browser, hoe experimenteler het resultaat. Als de afbeelding bijvoorbeeld in Netscape Navigator wordt gerenderd, morpht ze langzaam in een kubistisch meesterwerk.

En in een oude versie van Opera… Nou, ik weet niet echt genoeg over kunst om hier iets zinnigs over te zeggen – maar het is zeker interessant.

“De browsers die in die tijd werden gemaakt, hadden niet kunnen voorspellen dat mensen CSS-kunst zouden gaan maken. Het was gewoon het internet: die plek waar informatie leefde. Je had alleen maar een aantal rechthoeken en misschien wat kleur nodig,” legt Smith uit. “Als je deze afbeelding in verschillende browsers bekijkt, kijk je naar de geschiedenis van internet en wat er toen van browsers werd verwacht.”

“Het is als een mood ring,” zegt ze over de gedaanteveranderingen van Pure CSS Francine.

Het blijkt dat je best vette dingen kunt doen – tenminste als je net zo getalenteerd en toegewijd bent als Smith. Cascading style sheets (CSS) vertellen je browser hoe een bepaalde website moet worden weergeven. Je schrijft wat code waarmee je bepaalt hoe een object in een browser wordt weergeven, en kijkt naar de grootte, de randen (om een cirkel te maken), kleur, en nog veel meer. De vectorillustratie manipuleert de vormen en brengt ze samen in het uiteindelijke ontwerp. Als je CSS-kunst maakt, breng je verschillende lagen aan en rangschik je allerlei vormen. Maar je kunt niet altijd zien wat je aan het maken bent terwijl je het aan het werk bent, dus het hele proces is een soort vallen en opstaan, legt Smith uit.

“Ik moet eerst elk element uittypen en voor elk van die elementen een regel schrijven. Het is niet zo makkelijk of snel als dat ding met een verftool te maken,” zegt Smith. “Soms beperkt dat me om dingen zo gedetailleerd te maken als ik wil, alleen maar omdat het te veel tijd kost.”

Er is geen kwast-tool, geen cursor, en behalve het toetsenbord is er geen gemakkelijke input. Het is net als de hardcore-stand in een videogame, maar dan voor digitale kunst. “Ik weet niet eens waarom ik zo ben,” zegt Smith, als ze vertelt dat ze geïnspireerd raakt door een flinke uitdaging.

Smith zegt dat het haar ongeveer twee weken kost om een kunstwerk helemaal met CSS te maken. Haar werk is natuurlijk wel nooit écht helemaal af, omdat de code waaruit het beeld bestaat eindeloos kan worden aangepast. Het is belangrijk om te noemen dat er veel meer CSS-kunst bestaat, maar dat het werk van Smith zich onderscheidt door haar oog voor esthetiek en aandacht voor detail.

“Ik heb al zo vaak dezelfde vragen gekregen over mijn werk. ‘Waarom doe je dit?’ Er is geen goede reden, behalve dat ik het gewoon leuk vind en het gewoon kunst is,” vertelt Smith. Ze voegt eraan toe dat ze geen voordeel heeft ten opzichte van anderen, behalve dat ze veel vrije tijd heeft.

“Als je wilt leren programmeren, zullen veel mensen je aanraden om een gratis API te vinden en er een project mee te maken,” gaat ze verder. “Het zou hetzelfde moeten zijn met CSS; je bent niet in opdracht aan het werken. Je bent alleen maar bezig met code, hebt lol met het proces en probeert jezelf uit te dagen. En dit is een goede manier om dat te doen.”

Volg Motherboard op Facebook en Twitter.