DEV Community

Cover image for Drawing Frankenstein's Monster with CSS
Alvaro Montoro
Alvaro Montoro Subscriber

Posted on

Drawing Frankenstein's Monster with CSS

Another Halloween-themed illustration done with HTML and CSS. If yesterday it as a little Grim Reaper, today it is Frankenstein's Monster:

While coding it, I realized that it started looking more like the Hulk and less like Frankenstein's monster... I almost changed direction halfway and go with the superhero approach instead of the monster, but I didn't.

The whole drawing process took around one hour. Here there's a 3-minute video of how it was done (at 20x):

A couple of things to do before the next illustration: practice repeating gradients in CSS (had some trouble with them for the stitches, opted for a regular gradient), and revisit Flex (I got confused with align-items and justify-content.)

Latest comments (4)

Collapse
 
developman profile image
Dmitry Mineev

Thats amazing! Really. Never thougt that it possible to create something like this with just pure HTML and CSS.

Collapse
 
pengeszikra profile image
Peter Vivo

Amazing! I never imagine how can draw image by css, but this video show the process, thx!
( I always draw by hand or tablet so this seems very exciting )

Collapse
 
graciegregory profile image
Gracie Gregory (she/her)

Extra points for using the correct name/identification!! Frankenstein's monster. πŸ‘

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

Thanks πŸ€“