DEV Community

Cover image for Drawing Homer Simpson using circles in CSS

Drawing Homer Simpson using circles in CSS

Alvaro Montoro on December 11, 2019

CSS drawings are normally compositions of shapes that result in a vectorial-looking image. A cartoon character like Homer Simpson doesn't fit in th...
Collapse
 
ayush_saran profile image
Ayush Saran •

Wow! Thats impressive

Collapse
 
ben profile image
Ben Halpern •

I love this!

Collapse
 
alvaromontoro profile image
Alvaro Montoro •

Thanks! 😊

Collapse
 
paul9115 profile image
Paul May •

I'm mostly impressed that you found something that works in ie11

Collapse
 
alvaromontoro profile image
Alvaro Montoro •

We had to support IE11 at work until hair a few months back. So you could say that i had some experience with that.

Collapse
 
jrumandal profile image
John Ralph Umandal •

I showed to my dev team, and they were impressed by this awesome drawing

Collapse
 
daniel13rady profile image
Daniel Brady •

Well done 👏

This is the first I've heard of drawing with CSS (granted, I'm pretty new to the CSS world, so perhaps not surprising), but I've been thinking in that general direction on a personal project I'm working on. You mention a few times:

this is not the best way to do CSS drawings

Do you have any recommended resources for "better" ways to approach CSS drawings?

Collapse
 
alvaromontoro profile image
Alvaro Montoro •

You can check a few articles on DEV, CSS-Tricks, or Medium.

CSS drawing is a fun thing to do to learn CSS (you practice positioning, borders, shadows, gradients, transforms...), but it is not that a good fit for production (at least not for now and not for big things). If you want to do something more practical, I'd recommend SVG (and you can apply similar CSS knowledge).

There are many people that do great things with CSS: jhey (and the DEV account), Diana Smith, Ben Evans. For SVG, Sara Drasner and Adam Kuhn. And they all have projects to see/study on CodePen.

Collapse
 
tawsbob profile image
Dellean Santos •

lets puts some color :P

Collapse
 
alvaromontoro profile image
Alvaro Montoro •

Do you mean like this one? codepen.io/alvaromontoro/pen/rPazmv

Collapse
 
tawsbob profile image
Dellean Santos •

awesome :P

Collapse
 
quevenrib profile image
Queven Ribeiro •

Hey Alvaro, great job!

But, how do you make the final part of the line don't look "cut"? When I create a border and put an 'overflow: hidden' on it, I want the end of the line to be rounded, you know?

How can we achieve this result?

Collapse
 
edzward profile image
Edzward •

Fake. That is clearly CSSorcery not regular CSS. Too awesome for us, mere mortals.

Collapse
 
starlingmercedes profile image
Starling Mercedes Rijo •

esta cool, gracias por compartir

Collapse
 
alvaromontoro profile image
Alvaro Montoro •

Gracias :)

Collapse
 
rose profile image
Rose •

This is amazing! 🤯

Collapse
 
ahbigie profile image
Ahbiggie •

Wow... This is so awesome

Collapse
 
alejandra_quetzalli profile image
Alejandra Quetzalli 🐾 •

ha! too awesome

Collapse
 
raddevus profile image
raddevus •

This is absolutely fascinating and amazing to discover that Homer can be drawn entirely with circles like that. Watching the animation at codepen.io is really great. This idea just expands the mind -- to think things are made up of something you may have never thought of before. This was really great. Thanks for sharing.

Collapse
 
sehardwick profile image
Steve •

Perfect thing to run across today - thanks for sharing this!

Collapse
 
ziizium profile image
Habdul Hazeez •

Awesome!

Collapse
 
kj2whe profile image
Jason •

Wow... that is f-ing awesome

Collapse
 
syashakash profile image
Akash Shivram •

Awesome !!!!!

Collapse
 
khrome83 profile image
Zane Milakovic •

Just wow. Really interesting technique! Really amazing stuff!

Collapse
 
deta19 profile image
mihai •

cool stuff

Collapse
 
cirphrank profile image
🎧Cirphrank👣 •

Nice one chief.

By the wayside: on line 32 of the css, change no to yes to reduce the circle distortion upon hover by about 99.98%

Collapse
 
maskoding profile image
Dimas Priyandi •

It's awesome , i want learn more specific to drawing face anime

Collapse
 
alvaromontoro profile image
Alvaro Montoro • • Edited

Thanks! Not a full article, but on these two videos I show how to make a manga/anime-looking face. Maybe they can serve as guidance:

Collapse
 
peacefullatom profile image
Yuriy Markov •

Awesomeness! 👍💖

Collapse
 
manja1227 profile image
Manjunath •

Cool!

Collapse
 
itsnunolemos profile image
Nuno Lemos • • Edited

Hahah, top!

Collapse
 
borewin profile image
Xavier Vermeulen •

Really awesome, good job.