Разработка Анимированный фон "Плазма" на чистом CSS

:root {
    --colorOne: rgba(128,63,32,1);
    --colorTwo: rgba(32,64,128,1);
    --colorThree: rgba(32,128,32,1);
    --colorFour: rgba(64,128,128,1);
    --colorFive: rgba(128,32,128,1);
}

html {
    mix-blend-mode: color-dodge;
      background-image: repeating-linear-gradient(90deg,
        var(--colorFive),
        var(--colorFour) 25vw,
        var(--colorFive) 50vw);
    animation: oneFX 3s infinite ease-in-out alternate;
}

@keyframes oneFX {
    to {
      background-position: -100vw;
    }
}

body::before {
    content: '';
    mix-blend-mode: color-dodge;
    position: fixed;
    top: -100vw;
    left: -100vw;
    right: -100vw;
    bottom: -100vw;
    background-image: repeating-linear-gradient(90deg,
        var(--colorFive),
        var(--colorThree) 200px,
        var(--colorFive) 400px);
    animation: twoFX 8s infinite linear;
}

@keyframes twoFX {
    to {
        transform: rotate(1turn);
    }
}

body::after {
    content: '';
    mix-blend-mode: color-dodge;
    position: fixed;
    top: -100vw;
    left: -100vw;
    right: -100vw;
    bottom: -100vw;
    background-image: radial-gradient(circle at center, var(--colorOne), var(--colorTwo), var(--colorOne), var(--colorTwo), var(--colorOne), var(--colorTwo), var(--colorOne), var(--colorTwo), var(--colorOne), var(--colorTwo), var(--colorOne), var(--colorTwo), var(--colorOne), var(--colorTwo), var(--colorOne), var(--colorTwo));
    animation: threeFX 6.5s infinite ease-in-out;
}

@keyframes threeFX {
    0%, 100% {
        transform: translate(-15%, -15%);
    }

    25% {
        transform: translate(-15%, 15%);
    }
 
    50% {
        transform: translate(15%, 15%);
    }
 
    75% {
      transform: translate(15%, -15%);
    }
}