:root {
    --color1_animation1: #0000FF;
    --color2_animation1: hsl(0,100%,50%);
    --duration_animation1: 4s;
}
/* ----------------------------------------------- */
#svg_animation1 {
    background-color: black;
}
/* ----------------------------------------------- */
#svg_animation1 > #circle1 {
    cx: 50%;
    /* fill: var(--color1_animation1); */
    animation-name: rotate360_1;
    animation-duration: var(--duration_animation1);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate360_1 {
    0% {
        cy: 5%;
        r: 5%;
        transform-origin: 50% 50%;
        transform: rotate(0deg);
        /* fill: var(--color1_animation1); */
    }

    50% {
        cy: 45%;
        r: 45%;
        transform-origin: 50% 50%;
        transform: rotate(-180deg);
        /* fill: var(--color2_animation1); */
    }
    100% {
        cy: 5%;
        r: 5%;
        transform-origin: 50% 50%;
        transform: rotate(-360deg);
        /* fill: var(--color1_animation1); */
    }
}
/* ----------------------------------------------- */
#svg_animation1 > #circle2 {
    cx: 50%;
    /* fill: var(--color2_animation1); */
    animation-name: rotate360_2;
    animation-duration: var(--duration_animation1);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate360_2 {
    0% {
        cy: 45%;
        r: 45%;
        transform-origin: 50% 50%;
        transform: rotate(180deg);
        /* fill: var(--color2_animation1); */
    }

    50% {
        cy: 5%;
        r: 5%;
        transform-origin: 50% 50%;
        transform: rotate(0deg);
        /* fill: var(--color1_animation1); */
    }
    100% {
        cy: 45%;
        r: 45%;
        transform-origin: 50% 50%;
        transform: rotate(-180deg);
        /* fill: var(--color2_animation1); */
    }
}