DEV Community

loading...
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)

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 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 😊

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 Author

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

Collapse
igmrrf profile image
Richard Francis

I've always wanted to learn stuffs like this.

But

😪😪😪

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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