CSS Art: Cupid

#frontendchallenge #devchallenge #css #html

This is a submission for Frontend Challenge - February Edition, CSS Art: February.

Inspiration

February is Black History Month, American Heart Month, National Bird-Feeding Month... not to mention that it's the month of big dates like Valentine's Day or Groundhog Day, and the birth month for Galileo Galilei or Charles Darwin.

Maybe of all those, I opted for the easiest and cheesiest one: Valentine's Day. I had found an illustration I liked by Ian Mikraz on Unsplash and decided to give it a go and try to replicate something similar in HTML+CSS.

Demo

You can check a live demo with the illustration on CodePen:

Journey

As in paper drawing, I tried to break the illustration into parts before starting:

Clouds
Stars
Cupid
- Body
  - Arms
  - Robe
  - Bow and arrow
  - Wings
  - Neck
- Head
  - Hair
  - Mouth
  - Eyes
  - Cheeks
  - Ear

Then I created shapes for those parts and put them together little by little. You can find how to create different shapes in CSS in one of my previous posts from DEV. The whole process took around 1 hour and 45 minutes, broken in smaller sessions because I had to do some chores.

If you are curious about the process, here's a time-lapse of the live coding process:

...And after all that... I forgot to add the wings to the Cupid (you may notice they are missing in the cover image but not in the demo). I added them afterwards.

Fun fact: as it is coded in CSS and it uses custom properties for the colors, you can easily personalize the Cupid to make it however you want (check lines 6-20 in the CodePen above). For example, here's another version: