:root {
    --duration_animation8: 5s;
    --timing-function_animation8: ease-in-out; /*linear*/
    --direction_animation8: normal;
}

/* ----------------------------------------------- */

#svg_animation8 > #rect1 {
    width: 30%;
    height: 5%;
    fill:blue;
    animation-name: rect1_animation8;
    animation-duration: var(--duration_animation8);
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function_animation8);
    animation-direction:  var(--direction_animation8);
}

@keyframes rect1_animation8 {
    0% {
        x: calc(20% - 30%/2);
        y: calc(30% - 5%/2);
        transform-origin: calc(20%) calc(30%);
        transform: rotate(120deg);
    }

    20% {
        x: calc(50% - 30%/2);
        y: calc(50% - 5%/2);
        transform-origin: calc(50%) calc(50%);
        transform: rotate(75deg);
    }
    
    40% {
        x: calc(70% - 30%/2);
        y: calc(40% - 5%/2);
        transform-origin: calc(70%) calc(40%);
        transform: rotate(225deg);
    }
    60% {
        x: calc(70% - 30%/2);
        y: calc(40% - 5%/2);
        transform-origin: calc(70%) calc(40%);
        transform: rotate(225deg);
    }
    80% {
        x: calc(20% - 30%/2);
        y: calc(80% - 5%/2);
        transform-origin: calc(20%) calc(80%);
        transform: rotate(225deg);
    }

    100% {
        x: calc(20% - 30%/2);
        y: calc(30% - 5%/2);
        transform-origin: calc(20%) calc(30%);
        transform: rotate(120deg);
    }
}

/* ----------------------------------------------- */

#svg_animation8 > #rect2 {
    width: 40%;
    height: 3%;
    fill:red;
    animation-name: rect2_animation8;
    animation-duration: var(--duration_animation8);
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function_animation8);
    animation-direction: var(--direction_animation8);
}

@keyframes rect2_animation8 {
    0% {
        x: calc(25% - 40%/2);
        y: calc(25% - 3%/2);
        transform-origin: calc(25%) calc(25%);
        transform: rotate(85deg);
    }
    20% {
        x: calc(25% - 40%/2);
        y: calc(75% - 3%/2);
        transform-origin: calc(25%) calc(75%);
        transform: rotate(95deg);
    }
    40% {
        x: calc(60% - 40%/2);
        y: calc(45% - 3%/2);
        transform-origin: calc(60%) calc(45%);
        transform: rotate(270deg);
    }
    60% {
        x: calc(60% - 40%/2);
        y: calc(45% - 3%/2);
        transform-origin: calc(60%) calc(45%);
        transform: rotate(270deg);
    }
    80% {
        x: calc(50% - 40%/2);
        y: calc(25% - 3%/2);
        transform-origin: calc(50%) calc(25%);
        transform: rotate(105deg);
    }
    100% {
        x: calc(25% - 40%/2);
        y: calc(25% - 3%/2);
        transform-origin: calc(25%) calc(25%);
        transform: rotate(85deg);
    }
}

/* ----------------------------------------------- */

#svg_animation8 > #rect3 {
    width: 50%;
    height: 20%;
    fill:green;
    animation-name: rect3_animation8;
    animation-duration: var(--duration_animation8);
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function_animation8);
    animation-direction: var(--direction_animation8);
}

@keyframes rect3_animation8 {
    0% {
        x: calc(65% - 50%/2);
        y: calc(20% - 20%/2);
        transform-origin: calc(65%) calc(20%);
        transform: rotate(165deg);
    }
    20% {
        x: calc(70% - 50%/2);
        y: calc(70% - 20%/2);
        transform-origin: calc(70%) calc(70%);
        transform: rotate(30deg);
    }
    40% {
        x: calc(35% - 50%/2);
        y: calc(45% - 20%/2);
        transform-origin: calc(35%) calc(50%);
        transform: rotate(0deg);
    }
    60% {
        x: calc(35% - 50%/2);
        y: calc(45% - 20%/2);
        transform-origin: calc(35%) calc(50%);
        transform: rotate(0deg);
    }
    
    80% {
        x: calc(70% - 50%/2);
        y: calc(70% - 20%/2);
        transform-origin: calc(70%) calc(70%);
        transform: rotate(30deg);
    }

    100% {
        x: calc(65% - 50%/2);
        y: calc(20% - 20%/2);
        transform-origin: calc(65%) calc(20%);
        transform: rotate(165deg);
    }
}

/* ----------------------------------------------- */

#svg_animation8 > #rect4 {
    width: 30%;
    height: 10%;
    fill:orange;
    animation-name: rect4_animation8;
    animation-duration: var(--duration_animation8);
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function_animation8);
    animation-direction: var(--direction_animation8);
}

@keyframes rect4_animation8 {
    0% {
        x: calc(50% - 30%/2);
        y: calc(80% - 10%/2);
        transform-origin: calc(50%) calc(80%);
        transform: rotate(45deg);
    }
    20% {
        x: calc(20% - 30%/2);
        y: calc(20% - 10%/2);
        transform-origin: calc(20%) calc(20%);
        transform: rotate(160deg);
    }
    40% {
        x: calc(70% - 30%/2);
        y: calc(55% - 5%/2);
        transform-origin: calc(70%) calc(55%);
        transform: rotate(-45deg);
    }
    60% {
        x: calc(70% - 30%/2);
        y: calc(55% - 5%/2);
        transform-origin: calc(70%) calc(55%);
        transform: rotate(-45deg);
    }
    80% {
        x: calc(80% - 30%/2);
        y: calc(15% - 5%/2);
        transform-origin: calc(80%) calc(15%);
        transform: rotate(160deg);
    }

    100% {
        x: calc(50% - 30%/2);
        y: calc(80% - 10%/2);
        transform-origin: calc(50%) calc(80%);
        transform: rotate(45deg);
    }
}

/* ----------------------------------------------- */

#svg_animation8 {
    background-color: black;
    animation-name: colorShift_animation8;
    animation-duration: var(--duration_animation8);
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function_animation8);
    animation-direction: var(--direction_animation8);
}

@keyframes colorShift_animation8 {
    0% {    filter: saturate(100%);}
    10% {   filter: saturate(25%);}
    20% {   filter: saturate(100%);}
    30% {   filter: saturate(25%);}
    40% {   filter: saturate(100%);}
    50% {   filter: saturate(100%);}
    60% {   filter: saturate(100%);}
    70% {   filter: saturate(25%);}
    80% {   filter: saturate(100%);}
    90% {   filter: saturate(25%);}
    100% {  filter: saturate(100%);}
}