:root {
    --colorTop_animation3: #FFB700;
    --colorRight_animation3: #FF00DC;
    --colorBottom_animation3: #00FFA8;
    --colorLeft_animation3: #1700FF;
    --duration_animation3: 8s;
    --timing-function_animation3: ease-in-out;
}
/* ----------------------------------------------- */
#svg_animation3 > #circle1 {
    cx: 50%;
    fill: var(--colorTop_animation3);
    animation-name: spiralTop;
    animation-duration: var(--duration_animation3);
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function_animation3);
}

@keyframes spiralTop {
    0% {
        r:10%;
        cy:10%;
        transform-origin: 50% 50%;
        transform: rotate(0deg);
    }
    50% {
        r: 1%;
        cy:48%;
        transform-origin: 50% 50%;
        transform: rotate(1440deg);
    }
    100% {
        r:10%;
        cy:10%;
        transform-origin: 50% 50%;
        transform: rotate(calc(1440deg + 1440deg));
    }
}
/* ----------------------------------------------- */
#svg_animation3 > #circle2 {
    cx: 50%;
    fill: var(--colorRight_animation3);
    animation-name: spiralRight;
    animation-duration: var(--duration_animation3);
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function_animation3);
}

@keyframes spiralRight {
    0% {
        r:10%;
        cy:10%;
        transform-origin: 50% 50%;
        transform: rotate(90deg);
    }
    50% {
        r: 1%;
        cy:48%;
        transform-origin: 50% 50%;
        transform: rotate(calc(1440deg + 90deg));
    }
    100% {
        r:10%;
        cy:10%;
        transform-origin: 50% 50%;
        transform: rotate(calc(1440deg + 90deg + 1440deg));
    }
}
/* ----------------------------------------------- */
#svg_animation3 > #circle3 {
    cx: 50%;
    fill: var(--colorBottom_animation3);
    animation-name: spiralBottom;
    animation-duration: var(--duration_animation3);
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function_animation3);
}

@keyframes spiralBottom {
    0% {
        r:10%;
        cy:10%;
        transform-origin: 50% 50%;
        transform: rotate(180deg);
    }
    50% {
        r: 1%;
        cy:48%;
        transform-origin: 50% 50%;
        transform: rotate(calc(1440deg + 180deg));
    }
    100% {
        r:10%;
        cy:10%;
        transform-origin: 50% 50%;
        transform: rotate(calc(1440deg + 180deg + 1440deg));
    }
}
/* ----------------------------------------------- */
#svg_animation3 > #circle4 {
    cx: 50%;
    fill: var(--colorLeft_animation3);
    animation-name: spiralLeft;
    animation-duration: var(--duration_animation3);
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function_animation3);
}

@keyframes spiralLeft {
    0% {
        r:10%;
        cy:10%;
        transform-origin: 50% 50%;
        transform: rotate(270deg);
    }
    50% {
        r: 1%;
        cy:48%;
        transform-origin: 50% 50%;
        transform: rotate(calc(1440deg + 270deg));
    }
    100% {
        r:10%;
        cy:10%;
        transform-origin: 50% 50%;
        transform: rotate(calc(1440deg + 270deg + 1440deg));
    }
}

/* ----------------------------------------------- */
#svg_animation3 {
    background-color: gray;
    animation-name: saturationShift;
    animation-duration: var(--duration_animation3);
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function_animation3);
}

@keyframes saturationShift {
    0% {
        filter: saturate(100%);
    }
    50% {
        filter: saturate(0%);
    }
    100% {
        filter: saturate(100%);
    }
}