This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.
Inspiration
What’s better than a Pizza on a weekend? 🍕🍕
Demo
Journey
So I initially began by writing a code for a simple pizza…
But then I thought about Dave Portnoy – Barstool Pizza Review Show
and knew that he would throw this flat pizza of mine right into the trash without even taking a bite.
So I pivoted, I cut my round pizza into (im)perfect slices just as my local pizza store does it using different
Each <div>s will have individual toppings attached to them like
<div class=“cheese”></div>
<div class=“green-pepper pepper-1”></div>
<div class=“green-pepper pepper-2”></div>
<div class=“green-pepper pepper-3”></div>
<div class=“tomatoes tomatoes-4”></div>
<div class=“tomatoes tomatoes-5”></div>
<div class=“olive olive-1”></div>
<div class=“olive olive-2”></div>
<div class=“olive olive-3”></div>
Challenges & Learning
My greatest challenge and learning from this exercise were:
1. CSS clip-path
I Spent hours understanding how the clip-path works and giving the perfect bend to my green peppers for better taste.
2. Blur and Cheese pull effect
<defs>
<filter id=“goo”>
<feGaussianBlur in=“SourceGraphic” result=“blur” stdDeviation=“10” />
<feColorMatrix in=“blur” mode=“matrix” values=“1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7” result=“goo” />
<feComposite in2=“goo” in=“SourceGraphic” result=“mix” />
</filter>
</defs>
</svg>
I took the inspiration from Online Code Pen that I found and took it to Google Gemini to understand what each attribute does.
feGaussianBlur: This filter adds a Gaussian blur effect to the element and we can control the blur radius.
feColorMatrix: This filter manipulates the element’s colors. We can adjust the saturation, contrast, and hue to create the “gooey” effect.
feComposite: Allows to composite the two/multiple filters and the attribute defines the first input of the composition.
Thank you for the wonderful exercise.
References
A code pen by Samritha S codepen
