:root {
    --duration_animation2: 2s;
    --timing-function_animation2: ease-in-out; /*linear*/
    --direction_animation2: normal;
    --minRotation_animation2: -5deg;
    --maxRotation_animation2: 5deg;
    --maxBrightness_animation2: 50%;
    --minBrightness_animation2: 100%;
    --color_animation2: orange;
}
/* ----------------------------------------------- */

#svg_animation2 > #circle1 {
    r: 30%;
    cx: 50%;
    cy: 50%;
    fill: var(--color_animation2);
    transform-origin: center;
    animation-name: circle1_animation2;
    animation-duration: var(--duration_animation2);
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function_animation2);
    animation-direction:  var(--direction_animation2);
    clip-path: polygon(0% 0%, 30% 0%, 50% 15%, 30% 20%, 45% 40%, 35% 60%, 30% 50%, 10% 60%, 20% 65%, 0% 100%);
}

@keyframes circle1_animation2 {
    0% {    filter: brightness(var(--maxBrightness_animation2)); transform: translate(0%, 0%) rotate(0deg);}
    
    25% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(-15%, -15%) rotate(30deg);}
    
    30% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(-15%, -15%) rotate(calc(30deg + var(--maxRotation_animation2)));}
    35% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(-15%, -15%) rotate(calc(30deg + var(--minRotation_animation2)));}
    40% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(-15%, -15%) rotate(calc(30deg + var(--maxRotation_animation2)));}
    45% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(-15%, -15%) rotate(calc(30deg + var(--minRotation_animation2)));}
    50% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(-15%, -15%) rotate(calc(30deg + var(--maxRotation_animation2)));}
    55% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(-15%, -15%) rotate(30deg);}
    
    80% {   filter: brightness(var(--maxBrightness_animation2)); transform: translate(0%, 0%) rotate(0deg);}
    
    100% {  filter: brightness(var(--maxBrightness_animation2)); transform: translate(0%, 0%) rotate(0deg);}
}
/* ----------------------------------------------- */

#svg_animation2 > #circle2 {
    r: 30%;
    cx: 50%;
    cy: 50%;
    fill: var(--color_animation2);
    transform-origin: center;
    animation-name: circle2_animation2;
    animation-duration: var(--duration_animation2);
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function_animation2);
    animation-direction:  var(--direction_animation2);
    clip-path: polygon(100% 0%, 30% 0%, 50% 15%, 30% 20%, 45% 40%, 50% 30%, 50% 50%, 75% 35%, 60% 60%, 90% 55%, 100% 100%);
}

@keyframes circle2_animation2 {
    0% {    filter: brightness(var(--maxBrightness_animation2)); transform: translate(0%, 0%) rotate(0deg);}
    
    25% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(15%, -15%) rotate(-15deg);}
    
    30% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(15%, -15%) rotate(calc(-15deg + var(--maxRotation_animation2)));}
    35% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(15%, -15%) rotate(calc(-15deg + var(--minRotation_animation2)));}
    40% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(15%, -15%) rotate(calc(-15deg + var(--maxRotation_animation2)));}
    45% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(15%, -15%) rotate(calc(-15deg + var(--minRotation_animation2)));}
    50% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(15%, -15%) rotate(calc(-15deg + var(--maxRotation_animation2)));}
    55% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(15%, -15%) rotate(-15deg);}
    
    80% {   filter: brightness(var(--maxBrightness_animation2)); transform: translate(0%, 0%) rotate(0deg);}
    
    100% {  filter: brightness(var(--maxBrightness_animation2)); transform: translate(0%, 0%) rotate(0deg);}
}

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

#svg_animation2 > #circle3 {
    r: 30%;
    cx: 50%;
    cy: 50%;
    fill: var(--color_animation2);
    transform-origin: center;
    animation-name: circle3_animation2;
    animation-duration: var(--duration_animation2);
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function_animation2);
    animation-direction:  var(--direction_animation2);
    clip-path: polygon(50% 50%, 75% 35%, 60% 60%, 90% 55%, 100% 100%, 50% 100%, 40% 80%, 60% 70%, 45% 70%, 55% 60%);
}

@keyframes circle3_animation2 {
    0% {    filter: brightness(var(--maxBrightness_animation2)); transform: translate(0%, 0%) rotate(0deg);}
    
    25% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(15%, 15%) rotate(-50deg);}
    
    30% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(15%, 15%) rotate(calc(-50deg + var(--maxRotation_animation2)));}
    35% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(15%, 15%) rotate(calc(-50deg + var(--minRotation_animation2)));}
    40% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(15%, 15%) rotate(calc(-50deg + var(--maxRotation_animation2)));}
    45% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(15%, 15%) rotate(calc(-50deg + var(--minRotation_animation2)));}
    50% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(15%, 15%) rotate(calc(-50deg + var(--maxRotation_animation2)));}
    55% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(15%, 15%) rotate(-50deg);}
    
    80% {   filter: brightness(var(--maxBrightness_animation2)); transform: translate(0%, 0%) rotate(0deg);}
    
    100% {  filter: brightness(var(--maxBrightness_animation2)); transform: translate(0%, 0%) rotate(0deg);}
}

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

#svg_animation2 > #circle4 {
    r: 30%;
    cx: 50%;
    cy: 50%;
    fill: var(--color_animation2);
    border: 0;
    transform-origin: center;
    animation-name: circle4_animation2;
    animation-duration: var(--duration_animation2);
    animation-iteration-count: infinite;
    animation-timing-function: var(--timing-function_animation2);
    animation-direction:  var(--direction_animation2);
    clip-path: polygon(50% 100%, 40% 80%, 60% 70%, 45% 70%, 55% 60%, 50% 50%, 50% 30%, 45% 40%, 35% 60%, 30% 50%, 10% 60%, 20% 65%, 0% 100%);
}

@keyframes circle4_animation2 {
    0% {    filter: brightness(var(--maxBrightness_animation2)); transform: translate(0%, 0%) rotate(0deg);}
    
    25% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(-15%, 15%) rotate(30deg);}
    
    30% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(-15%, 15%) rotate(calc(30deg + var(--maxRotation_animation2)));}
    35% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(-15%, 15%) rotate(calc(30deg + var(--minRotation_animation2)));}
    40% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(-15%, 15%) rotate(calc(30deg + var(--maxRotation_animation2)));}
    45% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(-15%, 15%) rotate(calc(30deg + var(--minRotation_animation2)));}
    50% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(-15%, 15%) rotate(calc(30deg + var(--maxRotation_animation2)));}
    55% {   filter: brightness(var(--minBrightness_animation2)); transform: translate(-15%, 15%) rotate(30deg);}
    
    80% {   filter: brightness(var(--maxBrightness_animation2)); transform: translate(0%, 0%) rotate(0deg);}
    
    100% {  filter: brightness(var(--maxBrightness_animation2)); transform: translate(0%, 0%) rotate(0deg);}
}

/* ----------------------------------------------- */
#svg_animation2 {
    background-color: gray;
}