Skip to content
loading...

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... [Read Full]
markdown guide
 
 

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

 
 

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?

 

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.

 

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?

 
 
 
 

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

 
 
 

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

 
 
 
 
 
 
 

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%

 

Just wow. Really interesting technique! Really amazing stuff!

 
 
code of conduct - report abuse