DEV Community

Cover image for Anyone up for a pizza party!!! 🍕
Priyank Sevak
Priyank Sevak

Posted on • Edited on

7 2 3 2 2

Anyone up for a pizza party!!! 🍕

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>
Enter fullscreen mode Exit fullscreen mode

Single Pizza Slice

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>
Enter fullscreen mode Exit fullscreen mode

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%);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

I took the inspiration from Online Code Pen that I found and took it to Google Gemini to understand what each attribute does.

  1. feGaussianBlur: This filter adds a Gaussian blur effect to the element and we can control the blur radius.

  2. feColorMatrix: This filter manipulates the element's colors. We can adjust the saturation, contrast, and hue to create the "gooey" effect.

  3. 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

Buy Me A Coffee

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (2)

Collapse
 
supermari0s profile image
Μάριος

That's amazing !

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

It's delicious, Priyank

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more