.anim {
    overflow: hidden;
    background: rgb(63, 63, 63);
    height: 40vh;
}

.anim {
    filter: drop-shadow(0 0 15px #fff);
}

.anim .poly {
    position: absolute;
    color: HSL(var(--hue), 100%, 65%);
    filter: drop-shadow(0 0 15px currentcolor);
    mix-blend-mode: screen;
    animation: pos 6s linear infinite;
}

.anim .poly:before {
    display: block;
    margin: -10em;
    padding: 10em;
    border-radius: 50%;
    transform: scale(0);
    background: orange;
    clip-path: var(--p0);
    animation: inherit;
    animation-name: poly;
    animation-timing-function: ease-out;
    content: "";
}

.anim .poly:nth-child(n + 1) {
    top: 50vh;
    left: 50vw;
    --x: 0;
    --y: 0;
    --hue: 187;
    --p0: polygon(calc(50%*(1 + 0.17365)) calc(50%*(1 + -0.98481)), calc(50%*(1 + 0.98481)) calc(50%*(1 + 0.17365)), calc(50%*(1 + -0.17365)) calc(50%*(1 + 0.98481)), calc(50%*(1 + -0.98481)) calc(50%*(1 + -0.17365)), calc(50%*(1 + 0.17365)) calc(50%*(1 + -0.98481)), calc(50% + (50% - 50%)*0.17365) calc(50% + (50% - 50%)*-0.98481), calc(50% + (50% - 50%)*-0.98481) calc(50% + (50% - 50%)*-0.17365), calc(50% + (50% - 50%)*-0.17365) calc(50% + (50% - 50%)*0.98481), calc(50% + (50% - 50%)*0.98481) calc(50% + (50% - 50%)*0.17365), calc(50% + (50% - 50%)*0.17365) calc(50% + (50% - 50%)*-0.98481));
    --p1: polygon(calc(50%*(1 + 0.17365)) calc(50%*(1 + -0.98481)), calc(50%*(1 + 0.98481)) calc(50%*(1 + 0.17365)), calc(50%*(1 + -0.17365)) calc(50%*(1 + 0.98481)), calc(50%*(1 + -0.98481)) calc(50%*(1 + -0.17365)), calc(50%*(1 + 0.17365)) calc(50%*(1 + -0.98481)), calc(50% + (50% - 4px)*0.17365) calc(50% + (50% - 4px)*-0.98481), calc(50% + (50% - 4px)*-0.98481) calc(50% + (50% - 4px)*-0.17365), calc(50% + (50% - 4px)*-0.17365) calc(50% + (50% - 4px)*0.98481), calc(50% + (50% - 4px)*0.98481) calc(50% + (50% - 4px)*0.17365), calc(50% + (50% - 4px)*0.17365) calc(50% + (50% - 4px)*-0.98481));
}

.anim .poly:nth-child(n + 4) {
    top: 25vh;
    left: 75vw;
    --x: 0;
    --y: 0;
    --hue: 37;
    --p0: polygon(calc(50%*(1 + -0.74314)) calc(50%*(1 + 0.66913)), calc(50%*(1 + -0.86603)) calc(50%*(1 + -0.5)), calc(50%*(1 + 0.20791)) calc(50%*(1 + -0.97815)), calc(50%*(1 + 0.99452)) calc(50%*(1 + -0.10453)), calc(50%*(1 + 0.40674)) calc(50%*(1 + 0.91355)), calc(50%*(1 + -0.74314)) calc(50%*(1 + 0.66913)), calc(50% + (50% - 50%)*-0.74314) calc(50% + (50% - 50%)*0.66913), calc(50% + (50% - 50%)*0.40674) calc(50% + (50% - 50%)*0.91355), calc(50% + (50% - 50%)*0.99452) calc(50% + (50% - 50%)*-0.10453), calc(50% + (50% - 50%)*0.20791) calc(50% + (50% - 50%)*-0.97815), calc(50% + (50% - 50%)*-0.86603) calc(50% + (50% - 50%)*-0.5), calc(50% + (50% - 50%)*-0.74314) calc(50% + (50% - 50%)*0.66913));
    --p1: polygon(calc(50%*(1 + -0.74314)) calc(50%*(1 + 0.66913)), calc(50%*(1 + -0.86603)) calc(50%*(1 + -0.5)), calc(50%*(1 + 0.20791)) calc(50%*(1 + -0.97815)), calc(50%*(1 + 0.99452)) calc(50%*(1 + -0.10453)), calc(50%*(1 + 0.40674)) calc(50%*(1 + 0.91355)), calc(50%*(1 + -0.74314)) calc(50%*(1 + 0.66913)), calc(50% + (50% - 4px)*-0.74314) calc(50% + (50% - 4px)*0.66913), calc(50% + (50% - 4px)*0.40674) calc(50% + (50% - 4px)*0.91355), calc(50% + (50% - 4px)*0.99452) calc(50% + (50% - 4px)*-0.10453), calc(50% + (50% - 4px)*0.20791) calc(50% + (50% - 4px)*-0.97815), calc(50% + (50% - 4px)*-0.86603) calc(50% + (50% - 4px)*-0.5), calc(50% + (50% - 4px)*-0.74314) calc(50% + (50% - 4px)*0.66913));
}

.anim .poly:nth-child(n + 7) {
    top: 75vh;
    left: 25vw;
    --x: 0;
    --y: 0;
    --hue: 85;
    --p0: polygon(calc(50%*(1 + 0.69466)) calc(50%*(1 + 0.71934)), calc(50%*(1 + -0.01745)) calc(50%*(1 + 0.99985)), calc(50%*(1 + -0.71934)) calc(50%*(1 + 0.69466)), calc(50%*(1 + -0.99985)) calc(50%*(1 + -0.01745)), calc(50%*(1 + -0.69466)) calc(50%*(1 + -0.71934)), calc(50%*(1 + 0.01745)) calc(50%*(1 + -0.99985)), calc(50%*(1 + 0.71934)) calc(50%*(1 + -0.69466)), calc(50%*(1 + 0.99985)) calc(50%*(1 + 0.01745)), calc(50%*(1 + 0.69466)) calc(50%*(1 + 0.71934)), calc(50% + (50% - 50%)*0.69466) calc(50% + (50% - 50%)*0.71934), calc(50% + (50% - 50%)*0.99985) calc(50% + (50% - 50%)*0.01745), calc(50% + (50% - 50%)*0.71934) calc(50% + (50% - 50%)*-0.69466), calc(50% + (50% - 50%)*0.01745) calc(50% + (50% - 50%)*-0.99985), calc(50% + (50% - 50%)*-0.69466) calc(50% + (50% - 50%)*-0.71934), calc(50% + (50% - 50%)*-0.99985) calc(50% + (50% - 50%)*-0.01745), calc(50% + (50% - 50%)*-0.71934) calc(50% + (50% - 50%)*0.69466), calc(50% + (50% - 50%)*-0.01745) calc(50% + (50% - 50%)*0.99985), calc(50% + (50% - 50%)*0.69466) calc(50% + (50% - 50%)*0.71934));
    --p1: polygon(calc(50%*(1 + 0.69466)) calc(50%*(1 + 0.71934)), calc(50%*(1 + -0.01745)) calc(50%*(1 + 0.99985)), calc(50%*(1 + -0.71934)) calc(50%*(1 + 0.69466)), calc(50%*(1 + -0.99985)) calc(50%*(1 + -0.01745)), calc(50%*(1 + -0.69466)) calc(50%*(1 + -0.71934)), calc(50%*(1 + 0.01745)) calc(50%*(1 + -0.99985)), calc(50%*(1 + 0.71934)) calc(50%*(1 + -0.69466)), calc(50%*(1 + 0.99985)) calc(50%*(1 + 0.01745)), calc(50%*(1 + 0.69466)) calc(50%*(1 + 0.71934)), calc(50% + (50% - 4px)*0.69466) calc(50% + (50% - 4px)*0.71934), calc(50% + (50% - 4px)*0.99985) calc(50% + (50% - 4px)*0.01745), calc(50% + (50% - 4px)*0.71934) calc(50% + (50% - 4px)*-0.69466), calc(50% + (50% - 4px)*0.01745) calc(50% + (50% - 4px)*-0.99985), calc(50% + (50% - 4px)*-0.69466) calc(50% + (50% - 4px)*-0.71934), calc(50% + (50% - 4px)*-0.99985) calc(50% + (50% - 4px)*-0.01745), calc(50% + (50% - 4px)*-0.71934) calc(50% + (50% - 4px)*0.69466), calc(50% + (50% - 4px)*-0.01745) calc(50% + (50% - 4px)*0.99985), calc(50% + (50% - 4px)*0.69466) calc(50% + (50% - 4px)*0.71934));
}

.anim .poly:nth-child(n + 10) {
    top: 39vh;
    left: 5vw;
    --x: 80vw;
    --y: -47vh;
    --hue: 41;
    --p0: polygon(calc(50%*(1 + 0.99863)) calc(50%*(1 + -0.05234)), calc(50%*(1 + 0.05234)) calc(50%*(1 + 0.99863)), calc(50%*(1 + -0.99863)) calc(50%*(1 + 0.05234)), calc(50%*(1 + -0.05234)) calc(50%*(1 + -0.99863)), calc(50%*(1 + 0.99863)) calc(50%*(1 + -0.05234)), calc(50% + (50% - 50%)*0.99863) calc(50% + (50% - 50%)*-0.05234), calc(50% + (50% - 50%)*-0.05234) calc(50% + (50% - 50%)*-0.99863), calc(50% + (50% - 50%)*-0.99863) calc(50% + (50% - 50%)*0.05234), calc(50% + (50% - 50%)*0.05234) calc(50% + (50% - 50%)*0.99863), calc(50% + (50% - 50%)*0.99863) calc(50% + (50% - 50%)*-0.05234));
    --p1: polygon(calc(50%*(1 + 0.99863)) calc(50%*(1 + -0.05234)), calc(50%*(1 + 0.05234)) calc(50%*(1 + 0.99863)), calc(50%*(1 + -0.99863)) calc(50%*(1 + 0.05234)), calc(50%*(1 + -0.05234)) calc(50%*(1 + -0.99863)), calc(50%*(1 + 0.99863)) calc(50%*(1 + -0.05234)), calc(50% + (50% - 4px)*0.99863) calc(50% + (50% - 4px)*-0.05234), calc(50% + (50% - 4px)*-0.05234) calc(50% + (50% - 4px)*-0.99863), calc(50% + (50% - 4px)*-0.99863) calc(50% + (50% - 4px)*0.05234), calc(50% + (50% - 4px)*0.05234) calc(50% + (50% - 4px)*0.99863), calc(50% + (50% - 4px)*0.99863) calc(50% + (50% - 4px)*-0.05234));
}

.anim .poly:nth-child(n + 13) {
    top: 73vh;
    left: 85vw;
    --x: -65vw;
    --y: 7vh;
    --hue: 169;
    --p0: polygon(calc(50%*(1 + -0.29237)) calc(50%*(1 + -0.9563)), calc(50%*(1 + 0.682)) calc(50%*(1 + -0.73135)), calc(50%*(1 + 0.97437)) calc(50%*(1 + 0.22495)), calc(50%*(1 + 0.29237)) calc(50%*(1 + 0.9563)), calc(50%*(1 + -0.682)) calc(50%*(1 + 0.73135)), calc(50%*(1 + -0.97437)) calc(50%*(1 + -0.22495)), calc(50%*(1 + -0.29237)) calc(50%*(1 + -0.9563)), calc(50% + (50% - 50%)*-0.29237) calc(50% + (50% - 50%)*-0.9563), calc(50% + (50% - 50%)*-0.97437) calc(50% + (50% - 50%)*-0.22495), calc(50% + (50% - 50%)*-0.682) calc(50% + (50% - 50%)*0.73135), calc(50% + (50% - 50%)*0.29237) calc(50% + (50% - 50%)*0.9563), calc(50% + (50% - 50%)*0.97437) calc(50% + (50% - 50%)*0.22495), calc(50% + (50% - 50%)*0.682) calc(50% + (50% - 50%)*-0.73135), calc(50% + (50% - 50%)*-0.29237) calc(50% + (50% - 50%)*-0.9563));
    --p1: polygon(calc(50%*(1 + -0.29237)) calc(50%*(1 + -0.9563)), calc(50%*(1 + 0.682)) calc(50%*(1 + -0.73135)), calc(50%*(1 + 0.97437)) calc(50%*(1 + 0.22495)), calc(50%*(1 + 0.29237)) calc(50%*(1 + 0.9563)), calc(50%*(1 + -0.682)) calc(50%*(1 + 0.73135)), calc(50%*(1 + -0.97437)) calc(50%*(1 + -0.22495)), calc(50%*(1 + -0.29237)) calc(50%*(1 + -0.9563)), calc(50% + (50% - 4px)*-0.29237) calc(50% + (50% - 4px)*-0.9563), calc(50% + (50% - 4px)*-0.97437) calc(50% + (50% - 4px)*-0.22495), calc(50% + (50% - 4px)*-0.682) calc(50% + (50% - 4px)*0.73135), calc(50% + (50% - 4px)*0.29237) calc(50% + (50% - 4px)*0.9563), calc(50% + (50% - 4px)*0.97437) calc(50% + (50% - 4px)*0.22495), calc(50% + (50% - 4px)*0.682) calc(50% + (50% - 4px)*-0.73135), calc(50% + (50% - 4px)*-0.29237) calc(50% + (50% - 4px)*-0.9563));
}

.anim .poly:nth-child(3n + 1) {
    animation-delay: 0s;
}

.anim .poly:nth-child(3n + 2) {
    animation-delay: -2s;
}

.anim .poly:nth-child(3n + 3) {
    animation-delay: -4s;
}

@keyframes pos {
    to {
        transform: translate(var(--x), var(--y)) rotate(270deg);
    }
}

@keyframes poly {
    25% {
        opacity: .99;
        clip-path: var(--p1);
    }
    75% {
        opacity: 0.99;
    }
    to {
        transform: scale(1);
        opacity: 0;
        clip-path: var(--p1);
    }
}