:root {--animation-timing: ease-in-out 12s both;}

  


    .svg-container5 {

              margin: 60px;
      height: 600px;
      width: 800px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .Color234{
      stroke-width: 0px;
      animation: radius-animate-0 var(--animation-timing);
    }



    @keyframes radius-animate-0 { 
       10%, 20% {fill: blue;} 
       0%, 50%, 90%, 100% {fill: rgb(0, 255, 0);} 
            } 
 


    .cls-2 {
      animation: radius-animate-b var(--animation-timing);
      r: calc(var(--radius-anim-b) * 1px); 
    }

    @keyframes radius-animate-b { 
       0%, 20%, 100% {r: calc(2.5*1px);} 
       60%, 90% {r: calc(5*1px);} 
            } 
  


    .cls-3 {
      animation: radius-animate-c var(--animation-timing);
      r: calc(var(--radius-anim-c) * 1px); 
    }

    @keyframes radius-animate-c { 
       0%, 20%, 100% {r: calc(2.5*1px);} 
       60%, 90% {r: calc(15*1px);}
         } 
   

    .cls-4 {
      animation: radius-animate-d var(--animation-timing);
      r: calc(var(--radius-anim-d) * 1px);
    }

    @keyframes radius-animate-d { 
       0%, 20%, 100% {r: calc(2.5*1px);} 
       60%, 90% {r: calc(20*1px);} 
            } 
 

    .cls-5 {
      animation: radius-animate-e var(--animation-timing);
      r: calc(var(--radius-anim-e) * 1px); 
    }

    @keyframes radius-animate-e { 
      0%, 20%, 100% {r: calc(2.5*1px);}  
      60%, 90% {r: calc(25*1px);} 
    } 


    .cls-6 {
      animation: radius-animate-f var(--animation-timing);
      r: calc(var(--radius-anim-f) * 1px); 
    }

    @keyframes radius-animate-f { 
      0%, 20%, 100% {r: calc(2.5*1px);} 
      60%, 90% {r: calc(30*1px);} 
    } 


    .cls-7 {
      animation: radius-animate-g var(--animation-timing);
      r: calc(var(--radius-anim-g) * 1px); 
    }

    @keyframes radius-animate-g { 
      0%, 60%, 90%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(5*1px);} 
     } 


    .cls-8 {
      animation: radius-animate-h var(--animation-timing);
      r: calc(var(--radius-anim-h) * 1px); 
    }

    @keyframes radius-animate-h { 
      0%, 100% {r: calc(2.5*1px);} 
      20%, 60%, 90% {r: calc(5*1px);}  
     } 


    .cls-9 {
      animation: radius-animate-i var(--animation-timing);
      r: calc(var(--radius-anim-i) * 1px); 
     }

    @keyframes radius-animate-i { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: 5;} 
      60%, 90% {r: calc(15*1px);} 
     } 


    .cls-10 {
      animation: radius-animate-j var(--animation-timing);
      r: calc(var(--radius-anim-j) * 1px); 
    }

    @keyframes radius-animate-j { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(5*1px);} 
      60%, 90% {r: calc(30*1px);} 
     } 


    .cls-11 {
      animation: radius-animate-k var(--animation-timing);
      r: calc(var(--radius-anim-k) * 1px); 
    }

    @keyframes radius-animate-k { 
      0%, 60%, 90%, 100% {r: calc(2.5*1px);}
      20% {r: calc(10*1px);} 
    } 

    .cls-12 {
      animation: radius-animate-l var(--animation-timing);
      r: calc(var(--radius-anim-l) * 1px); 
    }

    @keyframes radius-animate-l { 
      0%, 100% {r: calc(2.5*1px);}
      20% {r: calc(5*1px);} 
      60%, 90% {r: calc(5*1px);}  
    } 

    .cls-13 {
      animation: radius-animate-m var(--animation-timing);
      r: calc(var(--radius-anim-m) * 1px); 
    }

    @keyframes radius-animate-m { 
      0%, 100% {r: calc(2.5*1px);} 
      20%, 60%, 90% {r: calc(10*1px);}  
            } 


    .cls-14 {
      animation: radius-animate-n var(--animation-timing);
      r: calc(var(--radius-anim-n) * 1px); 
    }

    @keyframes radius-animate-n { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(10*1px);} 
      60%, 90% {r: calc(15*1px);}  
    } 


    .cls-15 {
      animation: radius-animate-o var(--animation-timing);
      r: calc(var(--radius-anim-o) * 1px); 
    }

    @keyframes radius-animate-o { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(10*1px);} 
      60%, 90% {r: calc(20*1px);}  
            } 


    .cls-16 {
      animation: radius-animate-p var(--animation-timing);
      r: calc(var(--radius-anim-p) * 1px); 
    }

    @keyframes radius-animate-p { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(10*1px);} 
      60%, 90% {r: calc(30*1px);}   
            } 


    .cls-17 {
      animation: radius-animate-q var(--animation-timing);
      r: calc(var(--radius-anim-q) * 1px); 
    }

    @keyframes radius-animate-q { 
      0%, 60%, 90%, 100% {r: calc(2.5*1px);}
      20% {r: calc(15*1px);} 
            } 


    .cls-18 {
      animation: radius-animate-r var(--animation-timing);
      r: calc(var(--radius-anim-r) * 1px); 
    }

    @keyframes radius-animate-r { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(15*1px);} 
      60%, 90% {r: calc(5*1px);} 
            } 
    

    .cls-19 {
      animation: radius-animate-s var(--animation-timing);
      r: calc(var(--radius-anim-s) * 1px); 
    }

    @keyframes radius-animate-s { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(15*1px);} 
      60%, 90% {r: calc(10*1px);} 
            } 


    .cls-20 {
      animation: radius-animate-t var(--animation-timing);
      r: calc(var(--radius-anim-t) * 1px); 
    }

    @keyframes radius-animate-t { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(15*1px);} 
      60%, 90% {r: calc(20*1px);} 
            } 


    .cls-21 {
      animation: radius-animate-u var(--animation-timing);
      r: calc(var(--radius-anim-u) * 1px); 
    }
    
    @keyframes radius-animate-u { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(15*1px);} 
      60%, 90% {r: calc(30*1px);}  
            } 


    .cls-22 {
      animation: radius-animate-v var(--animation-timing);
      r: calc(var(--radius-anim-v) * 1px); 
    }

    @keyframes radius-animate-v { 
      0%, 60%, 90%, 100% {r: calc(2.5*1px);}
      20% {r: calc(20*1px);} 
            } 


    .cls-23 {
      animation: radius-animate-w var(--animation-timing);
      r: calc(var(--radius-anim-w) * 1px); 
    }

    @keyframes radius-animate-w { 
      0%, 100% {r: calc(2.5*1px);}  
      20% {r: calc(20*1px);} 
      60%, 90% {r: calc(5*1px);}   
            } 


   .cls-24 {
      animation: radius-animate-x var(--animation-timing);
      r: calc(var(--radius-anim-x) * 1px); 
    }

    @keyframes radius-animate-x { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(20*1px);} 
      60%, 90% {r: calc(10*1px);}  
            } 


    .cls-25 {
      animation: radius-animate-y var(--animation-timing);
      r: calc(var(--radius-anim-y) * 1px); 
    }

    @keyframes radius-animate-y { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(20*1px);} 
      60%, 90% {r: calc(15*1px);}  
            } 


    .cls-26 {
      animation: radius-animate-z var(--animation-timing);
      r: calc(var(--radius-anim-z) * 1px); 
    }

    @keyframes radius-animate-z { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(20*1px);} 
      60%, 90% {r: calc(20*1px);}  
            } 

    
    .cls-27 {
      animation: radius-animate-aa var(--animation-timing);
      r: calc(var(--radius-anim-aa) * 1px); 
    }

    @keyframes radius-animate-aa { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(20*1px);} 
      60%, 90% {r: calc(25*1px);}  
            } 


    .cls-28 {
      animation: radius-animate-ab var(--animation-timing);
      r: calc(var(--radius-anim-ab) * 1px); 
    }

    @keyframes radius-animate-ab { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(20*1px);} 
      60%, 90% {r: calc(30*1px);}  
            } 


    .cls-29 {
      animation: radius-animate-ac var(--animation-timing);
      r: calc(var(--radius-anim-ac) * 1px); 
    }

    @keyframes radius-animate-ac { 
      0%, 60%, 90%, 100% {r: calc(2.5*1px);}
      20% {r: calc(25*1px);} 
            } 


    .cls-30 {
      animation: radius-animate-ad var(--animation-timing);
      r: calc(var(--radius-anim-ad) * 1px); 
    }

    @keyframes radius-animate-ad { 
      0%, 100% {r: calc(2.5*1px);}  
      20% {r: calc(25*1px);} 
      60%, 90% {r: calc(5*1px);}  
            } 



    .cls-31 {
      animation: radius-animate-ae var(--animation-timing);
      r: calc(var(--radius-anim-ae) * 1px); 
    }

    @keyframes radius-animate-ae { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(25*1px);} 
      60%, 90% {r: calc(15*1px);}   
            } 



    .cls-32 {
      animation: radius-animate-af var(--animation-timing);
      r: calc(var(--radius-anim-af) * 1px); 
    }

    @keyframes radius-animate-af { 
      0%, 100% {r: calc(2.5*1px);} 
      20%, 60%, 90% {r: calc(25*1px);}   
            } 


    .cls-33 {
      animation: radius-animate-ag var(--animation-timing);
      r: calc(var(--radius-anim-ag) * 1px); 
    }

    @keyframes radius-animate-ag { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(25*1px);} 
      60%, 90% {r: calc(30*1px);}  
            } 


    .cls-34 {
      animation: radius-animate-ah var(--animation-timing);
      r: calc(var(--radius-anim-ah) * 1px); 
    }

    @keyframes radius-animate-ah { 
      0%, 60%, 90%, 100% {r: calc(2.5*1px);}
      20% {r: calc(30*1px);} 
            } 


    .cls-35 {
      animation: radius-animate-ai var(--animation-timing);
      r: calc(var(--radius-anim-ai) * 1px); 
    }

    @keyframes radius-animate-ai { 
      0%, 100% {r: calc(2.5*1px);} 
      20% {r: calc(30*1px);} 
      60%, 90% {r: calc(25*1px);}  
            } 


    .cls-36 {
      animation: radius-animate-aj var(--animation-timing);
      r: calc(var(--radius-anim-aj) * 1px); 
    }

    @keyframes radius-animate-aj { 
      0%, 100% {r: calc(2.5*1px);} 
      20%, 60%, 90% {r: calc(30*1px);}  
            } 



 /* 25 */







  
  
          @media screen and (max-width: 768px) {
              [class^="svg-container5"] {
                  padding: 20px 0;
              }
  
              [class^="svg-container5"] svg {
                  width: 480px;
                  height: 360px;
              }
          }
  
          @keyframes Rotate1 {
              20% {
                  transform: rotate(0deg);
              }
  
              30% {
                  transform: rotate(-180deg);
              }
  
              86% {
                  transform: rotate(-180deg);
              }
  
              90% {
                  transform: rotate(0deg);
              }
          }
  
          @keyframes Rotate1a {
              20% {
                  transform: rotate(0deg);
              }
  
              30% {
                  transform: rotate(-360deg);
              }
  
              86% {
                  transform: rotate(-360deg);
              }
  
              96% {
                  transform: rotate(0deg);
              }
          }
  
          @keyframes Rotate1b {
              20% {
                  transform: rotate(0deg);
              }
  
              30% {
                  transform: rotate(360deg);
              }
  
              86% {
                  transform: rotate(360deg);
              }
  
              96% {
                  transform: rotate(0deg);
              }
          }
  
          @keyframes Rotate2 {
              20% {
                  transform: rotate(0deg);
              }
  
              30% {
                  transform: rotate(-90deg);
              }
  
              86% {
                  transform: rotate(-90deg);
              }
  
              90% {
                  transform: rotate(0deg);
              }
          }
  
          @keyframes Rotate3 {
              20% {
                  transform: rotate(0deg);
              }
  
              30% {
                  transform: rotate(90deg);
              }
  
              86% {
                  transform: rotate(90deg);
              }
  
              90% {
                  transform: rotate(0deg);
              }
          }
  
          @keyframes move1 {
              20% {
                  transform: translatex(0px);
              }
  
              30% {
                  transform: translatex(-200px);
              }
  
              86% {
                  transform: translatex(-200px);
              }
  
              90% {
                  transform: translatex(0px);
              }
          }
  
          @keyframes move2 {
              24% {
                  transform: translatey(0px);
              }
  
              34% {
                  transform: translatey(200px);
              }
  
              86% {
                  transform: translatey(200px);
              }
  
              90% {
                  transform: translatex(0px);
              }
          }
  
  
          #rect_5a_24 {
              transform-origin: 600px 200px;
              animation: Rotate1 ease 12s infinite;
          }
  
          #tri_5grp {
              transform-origin: 500px 300px;
              animation: Rotate2 ease 12s infinite;
          }
  
          #sem_5half {
              transform-origin: 600px 400px;
              animation: Rotate3 ease 12s infinite;
          }
  
          #tri_5b {
              transform-origin: 700px 100px;
              animation: Rotate1 ease 12s infinite;
          }
  
          #cir_5c {
              animation: move1 ease 12s infinite;
          }
  
          #sem_T2a {
              transform-origin: 200px 200px;
              animation: Rotate1a ease 12s infinite;
          }
  
          #sem_T2b {
              transform-origin: 200px 200px;
              animation: Rotate1b ease 12s infinite;
          }
  
          #rect_T2e {
              transform-origin: 200px 400px;
              animation: Rotate1a ease 12s infinite;
          }