Kinetic CodeCraft

Web Animation and Code Artistry

Every element in the images below is made with code—but all are informed by creative processes I use when drawing or painting in Adobe Photoshop or Illustrator. No graphics apps or JS libraries were used—just a code editor (Sublime Text) and Chrome browser and same code used to make most basic websites.
Using HTML, I defined objects and combined them into characters, objects, landscapes, and other elements. I used CSS to craft color, shape, line, position, texture, opacity, and other properties. Motion and interaction properties are engineered with CSS, and sometimes JavaScript.

Click images to view the live pages.

Buzzed Animation by Greg Klamt

Leafygreen

A flower sways in the breeze as the waves weave on water, and clouds stroll across the sky, as blades of grass slowly tickle the tides. (I did this one on CodePen)

99-BOB.com

This is an app I created as an exercise to improve my JavaScript, and have some fun with CSS animations and interactions. It came out of wondering if I could make a piece of interactive art out of one of the stupidest songs ever written, and improve my JS skills in the process.

All the elements and animations are styled with CSS, including the bottles, bricks on the wall, and other backgrounds. The size of the entire app is less than 100k. (Really small.)

This was my first single page app from scratch using vanilla JS, and I learned a lot and had a lot of fun.

Note on bugs: If it was a serious project, I would have architected it more throughly for game architecture, performance, smoother UX, accessibility, etc.—but that was not the exercise I wanted to do. The CSS illustrations kept the file size small, and look good and resize well, but they are complex, slow loading and put too much weight on the processors. The countdown function does not count properly with a quantity other than 99—though I have an earlier version that works, which I need to merge. It needs fixes for browser compatibility as well.

More CSS Art

Despite having been focused in web design for years, until recently, I did not think of the code used to create websites as an artistic medium, but rather, more of a vehicle to display content (words, pictures, video) that had been created outside of the coding environment.

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 any starting plan or sketches. 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 layer ordering and opacity, eventually adding interactions and animation to bring them to life.

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 work best in modern versions of Firefox and Chrome. I hope to find time to gracefully degrade these for other browsers and devices.