DEV Community

loading...
Cover image for Drawing Frankenstein's Monster with CSS

Drawing Frankenstein's Monster with CSS

Alvaro Montoro
CSS aficionado ⊆ Web Developer ⊆ Software Developer ⊆ Person
・1 min read

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.)

Discussion (5)

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 Author • Edited

Thanks 🤓

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
developman profile image
Dmitry Mineev

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