How I stumbled across a niche hobby I never knew existed: Drawing (and animating) in CSS.
CodePen is a service that lets you mess around with coding in a sandbox environment. There are many others like it, JSFiddle and CodeSandbox for instance, and if you’ve ever searched for code examples online or read more than a couple articles on Medium, you’ve already seen it.
The great thing about CodePen though is that there is an underlying community to it. Pens are featured on the home page and ranked by their popularity. Users have profile pages, there are tags and even challenges.
I found myself with a few hours to kill and checked out the challenges. The monthly challenge was Animal themed and that weeks animal was the Panda.
One thing lead to another, and I had started trying to draw a panda using nothing but CSS. Now you’re probably already thinking, “you could just use Illustrator to draw a panda, and animate the SVG?”, well, yes, but remember, this was a challenge!
Here’s my entry:
I won’t dive too much into how I made this, but basically the gist of it is that I made the head and torso largely out of the same shape, I squashed the torso using transform: scale, and the limbs, eyes and ears are :before and :after pseudo elements on simple divs. The animation is basically the entire character wobbling side by side, the legs alternating the same animation, and the arms running a similar animation at different speeds. I had no idea what it would look like at first, I just kept tweaking, and the animations were stacked on top of each other one at a time until it just felt right.
Basically, there is nothing special here, try removing all of the border-radius in the pen, and remove the keyframes at the bottom, and you’ll get a better picture of how it was put together.
Any way, I made this little guy and hit Save, I clicked on the tag to see what others had been doing and realised that there is an entire community of people that enjoy drawing using nothing but the limitations you’re given by CSS. This isn’t a practical, simple method to serve a purpose, this is simply the merging of web development and drawing as a relaxing thing to do. As simple as that.
Excitedly, I checked out what other people make and holy hell:
As you can see, this is black magic, and I’m pretty shit at it compared to what other people are doing. If you’re intimidated by CSS, this can be a great way to learn CSS in an unconventional way. If you’re a wizard at CSS, try draw something instead of mocking up another Grid.
Don’t worry about the why, give in to the why not.
Get started: https://codepen.io/pen
Incase you’re interested, here are my other projects in this new hobby.