DEV Challenge: a Pure CSS Alfajor

#frontendchallenge #devchallenge #css

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

Alfajor is a common (and delicious) sweet snack among several regions in Latin America. Recently, I received a visit from my family and have been eating so many of them... So here's my tribute to this very much loved snack.

Demo

You will also find the code in this public repo.

Journey

I have always been curious about drawing with CSS, so this was the perfect opportunity to get started.

I learned about using the clip-path property to create custom shapes. This property adds a clipping region to set which part of an element is shown.
I also used the pseudo-elements ::before and ::after, which provide two additional boxes to add details to the drawing without adding more elements to the markup.
Finally, I wanted to create a bit of texture in my drawing, so I came across this great article where I learned how to add a grainy gradient using SVG. this great article, where I learn how to add a grainy gradient using SVG.
And had lots of fun creating this :) Thanks for reading!