DEV Community

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

Posted on

12 3

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

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (4)

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 πŸ€“

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.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay