CodePen Embed - CheesePull Pizza

<body>    
<div class="pizza-container">
    <div class="slice slice-1">
        <div class="sauce"></div>
        <div class="cheese"></div>
        <div class="onions"></div>
        <div class="olives"></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>
    </div>
    <div class="slice slice-2">
        <div class="sauce"></div>
        <div class="cheese"></div>
        <div class="olives"></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"></div>
        <div class="tomatoes tomatoes-2"></div>
        <div class="olive olive-1"></div>
        <div class="olive olive-2"></div>
        <div class="olive olive-3"></div>
    </div>
    <div class="slice slice-3">
        <div class="sauce"></div>
        <div class="cheese"></div>
        <div class="olives"></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-2"></div>
        <div class="tomatoes tomatoes-3"></div>
        <div class="olive olive-1"></div>
        <div class="olive olive-2"></div>
        <div class="olive olive-3"></div>
    </div>
    <div class="slice slice-4">
        <div class="sauce"></div>
        <div class="cheese"></div>
        <div class="onions"></div>
        <div class="olives"></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-2"></div>
        <div class="olive olive-6"></div>
        <div class="olive olive-5"></div>
        <div class="olive olive-4"></div>
        <div class="tomatoes"></div>
    </div>
    <div class="slice slice-5">
        <div class="sauce"></div>
        <div class="cheese"></div>
        <div class="onions"></div>
        <div class="olives"></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-2"></div>
        <div class="tomatoes tomatoes-3"></div>
        <div class="olive olive-1"></div>
        <div class="olive olive-2"></div>
        <div class="olive olive-3"></div>
    </div>
    <div class="slice slice-6">
        <div class="sauce"></div>
        <div class="cheese"></div>
        <div class="onions"></div>
        <div class="olives"></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-6"></div>
        <div class="olive olive-5"></div>
        <div class="olive olive-4"></div>
    </div>
</div>
<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>
</body>
</html>

body{
    background-color: black;
}

.pizza-container{
    transform-origin:center center;
    position:relative;
    max-width:400px;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
}

.slice{
    background-color:#cca156;
    position: absolute;
    width: 170px;
    height: 150px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
    border-radius: 45%;
}

.sauce {
    background-color: red;
    position: absolute;
    width: 150px;
    height: 150px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    border-radius: 45%;
    top: 8px;
    left: 8px;
    
}

.cheese{
    background-color: #f9c02e;
    position: absolute;
    height: 150px;
    width: 150px;
    clip-path: polygon(64% 10%, 30% 20%, 25% 40%, 20% 90%, 40% 85%, 60% 100%, 100% 50%);
    border-radius: 50%;
}

.tomatoes{
    position: absolute;
    height: 40px;
    width: 40px;
    background-color: #F03727;
    border-radius: 100%;
    left: 36px;
    top: 82px;
    border: 2px solid #d93021;
}

.tomatoes.tomatoes-2{
    left: 80px;
    top:30px;
}

.tomatoes.tomatoes-3{
    height: 25px;
    width: 25px;
    left: 40px;
    top:40px;
}

.tomatoes.tomatoes-4{
    height: 25px;
    width: 25px;
    left: 80px;
    top:70px;
}

.tomatoes.tomatoes-5{
    height: 25px;
    width: 25px;
    left: 52px;
    top:40px;
}

.green-pepper{
    height:45px;
    width:45px;
    background-color: green;
    position: absolute;
    top: 12px;
    left: 66px;
    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%);
}
.green-pepper.pepper-1{
    transform: rotate(75deg);
}

.green-pepper.pepper-2{
    top: 75px;
    left: 45px;
    transform: rotate(-75deg);
}
.green-pepper.pepper-3{
    top: 90px;
    left: 75px;
    transform: rotate(120deg);
}

.olive {
    border: 5px solid olive;
    width: 15px;
    height: 15px;
    top: 90px;
    left: 75px;
    position: absolute;
    border-radius: 100%;
}

.olive.olive-1{
    border-color: black;
    width: 15px;
    height: 15px;
    top: 90px;
    left: 75px;
}

.olive.olive-2{
    width: 20px;
    height: 20px;
    top: 26px;
    left: 99px;
}

.olive.olive-3{
    width: 20px;
    height: 20px;
    top: 65px;
    left: 99px;
}
.olive.olive-4{
    border-color: black;
    width: 20px;
    height: 20px;
    top: 32px;
    left: 40px;
}
.olive.olive-5{
    width: 20px;
    height: 20px;
    top: 71px;
    left: 100px;
}
.olive.olive-6{
    width: 20px;
    height: 20px;
    top: 26px;
    left: 100px;
}


.slice.slice-1 {
    transform: rotate(0deg);
    top: 33px;
    left: 115px;
    
}
.slice.slice-2 {
    transform: rotate(60deg);
    left: 180px;
    top: 71px;
}
.slice.slice-3 {
    transform: rotate(120deg);
    left: 180px;
    top: 145px;
}
.slice.slice-4 {
    transform: rotate(180deg);
    left: 114px;
    top: 180px;
}
.slice.slice-5 {
    transform: rotate(240deg);
    left: 50px;
    top: 143px;
}
.slice.slice-6 {
    transform: rotate(300deg);
    left: 50px;
    top: 70px;
}

body{
    filter: url("#goo");
}

.slice.slice-4{
    animation: pull 5s ease-out infinite;
}

@keyframes pull{
    0%{
        left: 114px;
        top: 180px;
    }
    100%{
        left:114px;
        top:220px;
    }
}

This Pen is owned by Priyank Sevak on CodePen.

See more by @psevak on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.