Drawing a Koala with HTML and CSS

After a while not doing any CSS Art —mainly because of work reasons—, I decided to create something this weekend.

I didn't know what I wanted to do, just that I didn't want it to be flag. It had to be something that required some shadows and gradients... and I must admit that I ended struggling a little bit with that. Lack of practice?

After seeing a cartoon of a koala online, I decided to go with that. It didn't end up looking anything like the image that triggered the idea, but the result is not bad either —although I must admit it's not my favorite either.

You can see the source code and a live demo on CodePen:

I struggled with the lights and the shadows, and trying to add a bit of "texture." Hopefully, future drawings will be nicer.

This drawing uses some common CSS Art properties and attributes:

• Positioning
• Custom properties
• Background gradients
• Border radius
• Pseudo-elements
• Shadows
• Masks
• Clip-path
• Combinators
• Some bad coding and code repetition :-/

I recorded the coding process and shared in on my YouTube channel. I had been silent for a while, and it's a nice way to come back.

Comments

[Ezpie]

who wakes up one day and decides to make a koala out of CSS? WHO HUH!?

[Alvaro Montoro]

Who has two thumbs and make weird choices every now and then? 😄

[Ezpie]

Well, that would be me, honestly. But coming up with weird choices isn't a bug its just a feature ok? Its a bug that's a feature ok? We call it a buture.

[Anthony Max]

Lol, that turned out cool

[Bhuvi D]

So cuteee

[Muhammad Munir]

😊

[Nathan Tarbert]

Pretty cool comeback, I know getting those gradients and shadows just right is a pain. I always mess up the details too, so respect for sharing the whole process