DEV Community

Cover image for Drawing a cartoon character with CSS
Alvaro Montoro
Alvaro Montoro

Posted on

Drawing a cartoon character with CSS

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.

Top comments (12)

Collapse
 
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 :)

Collapse
 
alvaromontoro profile image
Alvaro Montoro

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 😊

Collapse
 
harshvats2000 profile image
HARSH VATS

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.
Thanks🙂

Collapse
 
marianalour profile image
MarianaLour

Gracias Alvaro, I will check the code later!

Collapse
 
nikhilroy2 profile image
Nikhil Chandra Roy

you replace the svg with css

Collapse
 
corentints profile image
Corentin

That's so cool!

Collapse
 
laasrinadiaa profile image
Nadia Laasri

Looks Awesome.
Good job

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks :)

Collapse
 
andrewbaisden profile image
Andrew Baisden

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

Collapse
 
alvaromontoro profile image
Alvaro Montoro

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!)

Collapse
 
igmrrf profile image
Richard Francis

I've always wanted to learn stuffs like this.

But

😪😪😪

Collapse
 
alvaromontoro profile image
Alvaro Montoro

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