He Sat In An Old Recliner


Graphic Arts Using HTML, CSS, and JavaScript

Doom Guy — One day, not sure how long ago, I had an idea of making pixel-esque art using HTML tables without style sheets. Without style sheets, the picture should appear as it should even if you were to disable page styles from your web browser. Turns out this process is tedious and I don't feel like honing my craft! This is Doom Guy made up of individually colored table cells.

Lemming — I decided to work on an animation too. This is probably the worst way to animate a character using CSS as there are more efficient ways. I was going to animate Jazz Jackrabbit's run cycle, but that would require too much work. I picked a simpler character and used style sheets this time. Remember the Amiga game Lemmings? Here's a little guy marching forward!

Pitfall 2600 — This one was done without tables or coloring individual cells. Instead, I used a div element and each keyframe has a box-shadow with multiple values to draw the pixel art. It's still a bit tedious, but it's easier, cleaner, and the file size is much smaller. Take a look at Pitfall Harry on the run from danger!

Wooly-less Willy — Years ago I made a Wooly Willy "e-toy." I drew the face in MS Paint and used DHTML to drag and drop shavings. I tried recreating it strictly with JavaScript inside a canvas. Canvas allows users to download what they see as an image. Writing drag and drop without JS libraries is challenging, so here's clean-shaven Willy written entirely with paths!