SOURCE

<div class="canvas">
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
    <div class="square square--tomato"></div>
    <div class="square square--aqua"></div>
    <div class="square square--gold"></div>
</div>

$square-size: 15px;
$colors: aqua gold tomato;

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #171723;
    perspective: 1200px;
}

.canvas {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: $square-size * 9 * 2;
    height: $square-size * 9 * 1.57;
    transform: skewX(-40deg) translate3d(0, 0, 0);
}

@keyframes shrink {
    0% {
        opacity: 1;
        border-radius: 50%;
        transform: scale(0);
    }
    10% {
        opacity: 1;
        border-radius: 0;
        transform: scale(1);
    }
    28% {
        opacity: 1;
        border-radius: 0;
        transform: scale(1) translateX(-200%);
    }
    30% {
        opacity: 1;
        border-radius: 0;
        transform: scale(1) translateX(-200%);
    }
    30.1% {
        opacity: 1;
        transform: scaleX(1) translateY(0) translateX(-200%);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    80%, 100% {
        opacity: 0;
        transform: scaleX(0) translateY(-500%) translateX(-200%);
    }
}

.square {
    flex-basis: $square-size * 2;
    height: $square-size;

    &::before {
        content: '';
        margin: 0 auto;
        display: block;
        width: 50%;
        height: 100%;
        opacity: 1;
        border-radius: 50%;
        transform: scale(0) translate3d(0, 0, 0);
        animation: shrink 5s infinite;
    }
}

.square:nth-child(n+61) {
    transform: rotate(180deg);
}

.square:nth-child(17n-7) {
    margin-left: $square-size;
}

@for $s from 1 through 119 {
    .square:nth-child(#{$s})::before {
        animation-delay: 0.1s * random(35);
    }
}

@each $color in $colors {
    .square--#{ $color + ''}::before {
        background-color: $color;
    }
}