DEV Community

Cover image for Drawing a butterfly with HTML and CSS
Alvaro Montoro
Alvaro Montoro

Posted on

20 1

Drawing a butterfly with HTML and CSS

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:

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (4)

Collapse
 
ic1101virgo profile image
Anjali Chaturvedi

This is so beautiful! I am going to try this. Thank you :)

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks! Please share what you end up doing 😊

Collapse
 
ic1101virgo profile image
Anjali Chaturvedi

Absolutely!

Collapse
 
waylonwalker profile image
Waylon Walker

css art is just mind blowing

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more