Animated Watermelon | Learning Axis

HTML

CSS

:root {
            --bg: #b6d887;
            --green: #009400;
            --red: #e70001;
            --seeds: #4f2500;
        }
        body {
            background-color: var(--bg);
        }
        .watermelon {
            position: absolute;
            width: 500px;
            height: 500px;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
        .slice-a {
            position: absolute;
            width: 200px;
            height: 100px;
            top: 40%;
            left: 30%;
            border-radius: 50%;
            transform: rotate(45deg);
            background-color: var(--red);
        }
        .slice-a:after {
            content: "";
            position: absolute;
            height: 100%;
            width: 100%;
            top: -15%;
            border-bottom: 60px solid var(--green);
            border-bottom-right-radius: 100px;
            border-bottom-left-radius: 100px;
        }
        .seed-a, .seed-b, .seed-c, .seed-d, .seed-e {
            height: 10px;
            width: 10px;
            border-bottom-right-radius: 100px;
            border-top-left-radius: 100px;
            background-color: var(--seeds);
        }
        .seed-a {
            position: absolute;
            top: 40%;
            left: 45%;
        }
        .seed-b {
            position: absolute;
            top: 40%;
            left: 50%;
        }
        .seed-c {
            position: absolute;
            top: 45%;
            left: 45%;
        }
        .seed-d {
            position: absolute;
            top: 35%;
            left: 40%;
        }
        .seed-e {
            position: absolute;
            top: 45%;
            left: 40%;
        }
        .slice-b {
            position: absolute;
            height: 100px;
            width: 200px;
            top: 40%;
            left: 30%;
            border-radius: 50%;
            transform: rotate(-130deg);
            background-color: var(--green);
            animation: slice 5s ease-in-out infinite;
        }
        .slice-b:after {
            content: "";
            position: absolute;
            height: 100%;
            width: 100%;
            top: -15%;
            border-bottom: 60px solid var(--green);
            border-bottom-right-radius: 100px;
            border-bottom-left-radius: 100px;
        }
        @keyframes slice {
            from {
                top: 40%;
                left: 30%;
            }
            to {
                top: 50%;
                left: 45%;
            }
        }