Wok (Css only)

index.html

    <div class="wok">
      <div class="frontHandle"></div>
      <div class="backHandle"></div>
      <div class="bodyTop"></div>
      <div class="foods">
        <food></food><food></food><food></food><food></food><food></food>
        <food></food><food></food><food></food><food></food><food></food>
        <food></food><food></food><food></food><food></food><food></food>
        <food></food><food></food><food></food><food></food><food></food>
      </div>
      <div class="bodyFront"></div>
    </div>

style.scss

*, *::before, *::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: calc(50% + 50px); left: 0;
        width: 100%;
        height: 10%;
        background-image: radial-gradient(ellipse  at top, #ccc, transparent 25%);
    }
}

$wood: brown;

.wok {
    position: absolute;
    top: calc(50% - 50px);
    animation:
        sides 3s ease-in-out infinite,
        angle 3s ease-in-out infinite;
    transform-origin: 200px 100px;

    @keyframes sides {
        0%, 40%, 55%, 70%, 85%, 100% { left: calc(50% - 150px); }
        20% { left: calc(50% - 120px); }
        47.5%, 62.5%, 77.5%, 90% { left: calc(50% - 145px); }
    }

    @keyframes angle {
        0%, 100% { transform: rotate(-5deg);}
        20% { transform: rotate(10deg);}
        40%, 90% { transform: rotate(0);}
    }
}

.bodyTop {
    position: absolute;
    top: 20px;
    left: 50px;
    width: 180px;
    height: 20px;
    border-radius: 50%;
    background-image: repeating-linear-gradient(120deg, #111 0%, #444 25%, #111 50%, #444 75%, #111 100%, );
    border: 1px solid #444;
}

.bodyFront {
    position: absolute;
    top: 30px; left: 50px;
    width: 180px;
    height: 80px;
    border: 1px solid #444;
    border-radius: 0 0 80px 80px;
    background-image:
        radial-gradient(circle at bottom, rgba(0, 0, 0, 0.5), rgba(127, 127, 127, 0.25)),
        repeating-linear-gradient(#111 0px, #111 1px, #000 2px, #000 4px);

    &::before, &::after {
        content: '';
        position: absolute;
        width: 3px;
        background-image: repeating-linear-gradient(to right, #777, #aaa, #777);
        border-radius: 3px;
        transform-origin: center;
    }
    
    &::before {
        top: 4px; left: -1px;
        height: 10px;
        transform: rotate(-10deg);
    }
    
    &::after {
        top: 3px; right: -1px;
        height: 12px;
        transform: rotate(10deg);
    }
}

.frontHandle {
    position: absolute;
    top: 25px;
    left: 20px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: $wood;
    background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));

    &::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 5px;
        width: 30px;
        height: 6px;
        border-radius: 6px;
        background-image: repeating-linear-gradient(#777, #aaa, #777);
        transform: rotate(15deg);
        transform-origin: left;
    }
}

.backHandle {
    position: absolute;
    top: 30px;
    left: 255px;
    width: 80px;
    height: 20px;
    border-radius: 3px 15px 15px 3px;
    background-color: $wood;
    background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));

    &::before {
        content: '';
        position: absolute;
        top: 3px;
        left: -10px;
        width: 10px;
        height: 14px;
        border-radius: 3px 0 0 3px;
        background-image: linear-gradient(#777, #333 70%, #777);
    }

    &::after {
        content: '';
        position: absolute;
        top: 6px;
        left: -30px;
        width: 113px;
        height: 8px;
        border-radius: 6px;
        background-image: repeating-linear-gradient(#777, #aaa, #777);
        transform-origin: left;
        z-index: -1;
    }
}

food {

    $colors: #982121, #ff611d, #e32929, #ffb80e, #813531, #29e329, #318135 ;

    @for $i from 1 through 20 {
        &:nth-child(#{$i}) {
            --foodWidth: #{(random(10) + 20 ) + px};
            --foodHeight: #{(random(10) + 20 ) + px};
            --foodColor: #{nth($colors, random(7))};
            --foodXoff: #{(random(20) - 10 ) + px};
            --foodYoff: #{(random(20) - 10 ) + px};
            --foodSpeed : #{((random(20) + 10) / 10) + s};
            --foodDelay : #{((random(6) - 3) / 10) + s};
        }
    }

    position: absolute;
    top: 50px;
    left: 170px;

    width: var(--foodWidth);
    height: var(--foodHeight);
    background-color: var(--foodColor);
    border-radius: 0 75%;
    border: 1px solid #4444;
    background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));

    animation:
        toss 3s infinite ease-in-out,
        rotate var(--foodSpeed) infinite linear;
    animation-delay: var(--foodDelay);

    @keyframes toss {
        0%, 70%, 100% { top: 50px; left: 170px; }
        20% { left: 65px; }
        40% { top: -65px; }
    }

    @keyframes rotate {
        from {transform: rotate(0) translate(var(--foodXoff), var(--foodYoff)); }
        to {transform: rotate(360deg) translate(var(--foodXoff), var(--foodYoff)); }
    }
}

wok-css-only.markdown

Wok (Css only)

A Pen by Amit Sheen on CodePen.

License.