DEV Community

Cover image for Drawing Homer Simpson using circles in CSS
Alvaro Montoro
Alvaro Montoro

Posted on • Updated on • Originally published at


Drawing Homer Simpson using circles in CSS

CSS drawings are normally compositions of shapes that result in a vectorial-looking image. A cartoon character like Homer Simpson doesn't fit in that category, which makes drawing it in CSS a challenge.

On top of that, this cartoon was done as part of a CodePen challenge that consisted of building something limiting ourselves to one shape: the circle, which adds an interesting restriction to the mix.

Because of that, this is not going to be a regular article on how to draw on CSS. It is also not the right way to do things -if there's such thing as the right way-, but a different (and interesting) approach to this problem.

And now is when you may ask "How are you going to draw Homer Simpson using only circles?" And that's a great question.

The first step is picking up an image. I didn't draw Homer Simpson from memory, I had a background image that I used for guidance, tracing the lines over it.

The trick is using two circles for each line: one circle to draw the line in itself, and another circle to crop it. One inside the other:

  • The interior circle is used to draw the line. It has a border and it is positioned absolutely inside the other circle.
  • The exterior circle is used for cropping the interior one. It has no borders, no fill, nothing but an overflow: hidden.

Something like this:

Schema with how the circles are structured one inside the other

Which translated into code looks like this:

<div id="part-of-Homer-face">
Enter fullscreen mode Exit fullscreen mode
div {  
  border: 0;
  border-radius: 50%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: absolute;

div > div {
  border: 3px solid black;

/* exterior circle*/
#part-of-Homer-face {
  top: ...px;
  left: ...px;

/* interior circle */
#part-of-Homer-face > div {
  top: ...px;
  left: ...px;
Enter fullscreen mode Exit fullscreen mode

The next step would be breaking the image into shapes. I know we are only using circles, so it would be more of breaking it into circular and not-so-circular shapes.

So let's focus on Homer Simpson's features that are mostly circles: eyes, ears, nose tip, top of the head, etc. I like using the eyes as a starting point because they are easy to do and they already give personality to the drawing.

Adding the first cropped circles leaves us with something like this:

Circles to create Homer Simpson's shape

Not there yet, but you can already see Homer

Your next thought will probably be "That drawing's super-cool already -Thanks!- but how about the straight lines? Homer is not all curves and so far it is just a bunch of circles".

To answer the question: the straight lines are a bit trickier, but not that complicated. If you have a really big circle but can only see a small part of it, will it actually look like a circle?

If you make the circle big enough and only display a section of it, you may see a little curvature, but in general, it will look like a straight line. And that's what I did.

After adding those "straight" lines, our Homer looked more like Homer:

More complete Homer Simpson drawing using circles and lines

This looks more like it, just final touches missing

Finally, we need to add the lines to connect everything. This may be the trickiest part of it all because the lines on CSS are not going to match perfectly leaving gaps between them.

If you do it right, you won't notice the connections at 100% zoom; but, if you zoom in, you will notice that they are far from perfect. You will also notice that CSS drawings scale great.

The result can be seen here (mouse over to show all the circles, but beware it may look a bit creepy):

Or check out this animated version of the same Homer Simpson's portrait.

Again, this is not the best way to do CSS drawings, but it has some advantages: it is pretty standard HTML and CSS. No transforms, no clip-paths, no gradients, no fancy CSS3... just borders and overflow: hidden. Which means that it looks similar in most browsers:

Drawing comparison in different browsers... it looks the same in all!

...Woo Hoo!

If you like drawing CSS and/or The Simpsons, here is a collection of different Simpsons characters drawn with CSS and HTML. I started a few months back, and someone told me about writing a post about how I did it. It has taken me a long time -and probably it's not the article they had in mind-, but I hope you enjoyed it.

Note: Homer Simpson's character and design are copyrighted, and only utilized in this post for "fair use" for research and educational purposes.

Top comments (32)

ben profile image
Ben Halpern

I love this!

alvaromontoro profile image
Alvaro Montoro

Thanks! ๐Ÿ˜Š

jrumandal profile image
John Ralph Umandal

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

paul9115 profile image
Paul May

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

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.

tawsbob profile image
Dellean Santos

lets puts some color :P

alvaromontoro profile image
Alvaro Montoro

Do you mean like this one?

tawsbob profile image
Dellean Santos

awesome :P

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?

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?

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.

ahbigie profile image

Wow... This is so awesome

kj2whe profile image

Wow... that is f-ing awesome

ziizium profile image
Habdul Hazeez


alejandra_quetzalli profile image
Alejandra Quetzalli ๐Ÿพ

ha! too awesome

rose profile image

This is amazing! ๐Ÿคฏ

edzward profile image

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

sehardwick profile image

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

starlingmercedes profile image
Starling Mercedes Rijo

esta cool, gracias por compartir

alvaromontoro profile image
Alvaro Montoro

Gracias :)

raddevus profile image

This is absolutely fascinating and amazing to discover that Homer can be drawn entirely with circles like that. Watching the animation at 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.

12 Rarely Used Javascript APIs You Need

Practical examples of some unique Javascript APIs that beautifully demonstrate a practical use-case.