CSS Drawing: Hey Duggee!

Over the past weekend, I tried something I’ve not done before: a CSS drawing.

I’ve seen lots of these types of art around, in particular in the CodePen newsletter The Spark (which I highly recommend signing up to). I’ve been wanting to produce something similar myself for a while, but I struggle to find inspiration for what to build. While looking after my niece recently, we put the animated TV show Hey Duggee! on for her, and I thought Duggee (and his friends) looked like a great candidate for a CSS drawing.

Here’s the finished piece:

See the Pen CSS Duggee by Samantha Miller (@sambulance) on CodePen.

I’m really pleased with how this turned out. I’m particularly happy with the ears, in particular the curve as the ear meets his head. I feel like I cheated a bit here as it uses a mask rather than a shape, but the end result works perfectly.

I’ve made a conscious point to not go back an refactor the code. I know there are mistakes and some parts could be leaner/more clever, but I sometimes get hung up on things being “perfect”, and I don’t want to get caught up with this. All in all this took about 4 hours to make, I don’t want to spend another 4 hours perfecting it.

This was a lot of fun to build and didn’t take much time at all. Maybe I’ll build some friends for Duggee too.

Leave a Reply

Your email address will not be published. Required fields are marked *