DEV Community

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

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
 
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
 
corentints profile image
Corentin •

That's so cool!

Collapse
 
marianalour profile image
MarianaLour •

Gracias Alvaro, I will check the code later!

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
The Lazy •

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.

Collapse
 
laasrinadiaa profile image
Nadia Laasri •

Looks Awesome.
Good job

Collapse
 
alvaromontoro profile image
Alvaro Montoro •

Thanks :)

Collapse
 
nikhilroy2 profile image
Nikhil Chandra Roy •

you replace the svg with css