Skip to main content
Photography of Alvaro Montoro being a doofus
Alvaro Montoro

Cross-Stitcher

CSS butterfly, by Alvaro Montoro

Drawing a butterfly with HTML and CSS

css html codepen showdev

I really enjoyed drawing today's illustration in HTML and CSS... although I must admit that I don't know much about butterflies and probably made a ton of mistakes. For starters, I don't think monarch butterflies have that eye on their wings, but let's not get too technical.

It also has a gentle animation with the wings flapping slightly as butterflies do sometimes (or always, as I said, not an expert here :P)

Here it is the CodePen with the illustration:

Here it is the video of how it was coded:

Article originally published on