How I stumbled across a niche hobby I never knew existed: Drawing (and animating) in 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/penIncase you’re interested, here are my other projects in this new hobby.. More details

Leave a Reply