DEV Community

Cover image for Drawing a cartoon character with CSS

Drawing a cartoon character with CSS

Alvaro Montoro
CSS aficionado ⊆ Web Developer ⊆ Software Developer ⊆ Person
・1 min read

Today, I drew a cartoon character using HTML and CSS. I built it from scratch (which is always fun), and recorded the process. The whole thing took a little over an hour, but at 20x, it is a lot faster ;)

Music credit: City Of Sins by Michael Ramir C.

After the recording, I still made a few more changes: made the eyes smaller, created variables for the lines, and adjusted the hair a little.

You can check and personalize the cartoon code on Codepen.

Discussion (12)

aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

I love your background image + background size trick for creating a reference grid. It's brilliant!

Also, you recently inspired me to try my hand at CSS art. It's nothing impressive, but I made the slightly smiling emoji and the thinking emoji and had a ton of fun!

Gonna watch this today and see if I can learn some tricks from you. Cheers :)

alvaromontoro profile image
Alvaro Montoro Author

The grid is helpful but a pain sometimes (when i forget that the coordinates are too left).

About your emojis: "nothing impressive"? Those emojis look great and they are really expressive! Thanks for sharing, and thanks for watching 😊

harshvats2000 profile image

That's really cool art. If someone can do this, it means they literally have good grasp and are very experienced in css. You nailed it bro. I will definitely share my stuff after learning from this video.

marianalour profile image

Gracias Alvaro, I will check the code later!

nikhilroy2 profile image
Nikhil Chandra Roy

you replace the svg with css

corentints profile image

That's so cool!

laasrinadiaa profile image
Nadia Laasri

Looks Awesome.
Good job

alvaromontoro profile image
Alvaro Montoro Author

Thanks :)

andrewbaisden profile image
Andrew Baisden

Wow very cool I never considered using a background grid as an aid for CSS drawings. Maybe next time...

alvaromontoro profile image
Alvaro Montoro Author

I find it useful in general, but sometimes I forget the position is top-left and mess a little. Give it a try and let us know what you think (plus share the CSS drawing!)

igmrrf profile image
Richard Francis

I've always wanted to learn stuffs like this.



alvaromontoro profile image
Alvaro Montoro Author

You should do it. It's a great way to practice and learn different properties in CSS.