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

$canvas-size: 500px;
$side-length: 300px;
$border-size: 4px;

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

.canvas {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: $canvas-size;
    max-height: $canvas-size;
    // border: 1px solid white;
}

.triangle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: $side-length;
    max-width: $side-length;
    height: $side-length;
    border-bottom: $border-size solid;
    transform-origin: 50% 71%;
    transform: translate(-50%, -50%);

    &,
    &::before,
    &::after {
        border-radius: $border-size;
    }

    &::before,
    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        height: 100%;
    }

    &::before {
        left: 0;
        border-left: $border-size solid;
        transform-origin: calc(0% + #{$border-size}) calc(100% - #{$border-size});
        transform: translateY($border-size) rotate(30deg);
    }

    &::after {
        right: 0;
        height: 100%;
        border-right: $border-size solid;
        transform-origin: calc(100% - #{$border-size}) calc(100% - #{$border-size});
        transform: translateY($border-size) rotate(-30deg);
    }
}

@for $i from 1 through 9 {
    @keyframes triangle-rotation-#{$i} {
        0%, 10% {
            transform: translate(-50%, -50%) rotate(0grad) scale(1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        }
        20%, 30% {
            transform: translate(-50%, -50%) rotate(0grad) scale(#{1 - ($i * 0.1 - 0.075)});
        }
        50% {
            transform: translate(-50%, -50%) rotate(#{(($i * 30) - 30) * -1}grad) scale(#{1 - ($i * 0.1 - 0.075)});
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        }
        60%, 80% {
            transform: translate(-50%, -50%) rotate(#{$i * 30 - 30}grad) scale(1);
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        }
        100% {
            transform: translate(-50%, -50%) rotate(0grad) scale(1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        }
    }
    .triangle:nth-child(#{$i}) {
        animation: triangle-rotation-#{$i} 5s infinite;
    }
}

.triangle--aqua {

    &,
    &::before,
    &::after {
        border-color: aqua;
    }
}

.triangle--gold {

    &,
    &::before,
    &::after {
        border-color: gold;
    }
}

.triangle--tomato {

    &,
    &::before,
    &::after {
        border-color: tomato;
    }
}

// nope