CSS Art: Grape

Inspiration

As a frontend engineer, you seldom encounter artistic CSS, so participating in this challenge was a rare treat. It also made me hungry for grapes, haha!

Demo

Journey

I want to admit that I cheated a little bit with the stem using a realistic-looking svg. My first draft utilized the clip-path property. However, its effect was quite cartoonish, so I dumped it.

The submission utilizes the following CSS properties:

1. display: grid was quite handy in creating the distribution of berries.
2. Gradients, shadows, and filters to create a somewhat photorealistic grape.
3. CSS variables.
4. :nth-child selector to introduce a little variety for the berries' shapes and sizes.
5. CSS animation so you could "squeeze" those berries.
6. Units - vh and % - to create responsiveness.