Creative Coding

These were created with code—HTML and CSS—and no graphics programs

Every tool has intrinsic advantages and limitations, but the limitations often inspire the most creativity for me—informing and shaping the creative process, and leading to new approaches and unexpected outcomes.


Buzzed-090715

I have been focused in web design for several years, and, until recently, did not think of the code used to create websites as an artistic medium—rather more of a vehicle to display content that had been created outside of the coding environment, in imaging programs, etc.

In the pieces shown on this page, every element was drawn, positioned, and animated using code, without any external images or other elements, and without a plan. In a similar way to how I would create something in Photoshop or Illustrator, I built one element at a time, and assembled them using CSS layering and opacity, eventually adding interactions and animation to bring them to life. Click on the images to view the live pages.

drips

These pieces all began while playing with code to test styles, transforms, transitions, animations, and other functions to see how far I could go. Departing from my familiar workflows, yet still using my layering, color, form as I might in a graphics app, I was inspired to work and think in new frameworks,  and ended up combining my passions for art, animation, and web design while learning a lot about what works and does not work so well.

There is something wonderful in overcoming the challenges and confines and pushing me into new explorations.

lotus

NOTE: These only seem to work properly in modern versions of Firefox, Chrome, and Opera. For some reason, Apple scores low on implementation of some of the best new CSS operators with Safari and iOS. I hope to find time to gracefully degrade these for other browsers