Anyone up for a pizza party!!! 🍕

#frontendchallenge #devchallenge #css

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

<div class="slice slice-1">....</div>

Each <div>s will have individual toppings attached to them like

       <div class="sauce"></div>
       <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

clip-path: polygon(10% 50%, 20% 45%, 30% 40%, 40% 40%, 50% 40%, 60% 40%, 70% 40%, 80% 40%, 90% 45%, 100% 70%, 90% 65%, 80% 60%, 70% 55%, 60% 55%, 50% 55%, 40% 55%, 30% 55%, 20% 55%, 10% 55%);

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <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.