:root {
  --dure: 100s;
  --bibi: #3da435;
  --aiai: #a43556;
}
.sone{
    fill:none;stroke-width:2.5px;}
    .s1{
        fill:none;stroke-width:2px;}
.s2,.s3,.s4,.s5,.s6,.s7{
  fill:none;stroke-width:1.5px;}
.s10,.s11,.s12,.s13,.s14,.s15,.s122, .s111, .s100, .s133{fill:none;stroke-width:2px;}
.s8,.s9{fill:none;stroke-width:2px;}
.s2,.s3,.s4,.s5,.s6,.s7{stroke:#fff;}
.s1,.s10,.s11,.s12,.s13{stroke:#888888;}
.s8,.s9,.s14,.s15{stroke:rgb(0, 255, 55);}
.sone, .s122, .s111, .s100, .s133 {stroke:#000;}

/*.s0{stroke:#0097fc;}
.s1{stroke:#1099e9;}
 
.s2{stroke:#00eeff;}
.s3{stroke:#ff00d4;}
.s4{stroke:#ffae00;}
.s5{stroke:#e53312;}
.s6{stroke:#3ce512;}
.s7{stroke:#a55199;}
.s8{stroke:#4fb283;}
.s9{stroke:#757575;}
.s10{stroke:#4035e0;}
.s11{stroke:#f3606c;}
.s12{stroke:#c280c1;}
.sone, .s122, .s111, .s100, .s133 {stroke:#000;}
.s13{stroke:#6335e0;}
.s14{stroke:#35e0ad;}
.s15{stroke:#83928e;}
*/
body, html {
     margin : auto;
     background-color: #000000;
}
.container {
  height: 100vh;
}
svg {
  width: 100%;
  height: 100%
}
.s1{
   
    transform-origin: 500px 500px;
  stroke-dasharray: 1000;
  animation-name: p1; 
  animation-duration: var(--dure);
  animation-iteration-count: infinite;
}
.s2, .s3{
    stroke-dasharray: 1571;
    animation-name: p2; 
    animation-duration: var(--dure);
    animation-iteration-count: infinite;
  }
.s4, .s5{
    stroke-dasharray: 1571;
    animation-name: p4; 
    animation-duration: var(--dure);
    animation-iteration-count: infinite;
}
 .s6, .s7{
  stroke-dasharray: 1571;
  animation-name: p6; 
  animation-duration: var(--dure);
  animation-iteration-count: infinite;
}

.s10, .s11{
  stroke-dasharray: 1899;
  animation-name: p10; 
  animation-duration: var(--dure);
  animation-iteration-count: infinite;
}
.s12, .s13{
  stroke-dasharray: 1899;
  animation-name: p12; 
  animation-duration: var(--dure);
  animation-iteration-count: infinite;
}
.s122, .s111{
    stroke-dasharray: 10;
  }
.s8, .s9{
  stroke-dasharray: 1571;
  animation-name: p8; 
  animation-duration: var(--dure);
  animation-iteration-count: infinite;
}
.s14, .s15{
  stroke-dasharray: 1571;
  animation-name: p14; 
  animation-duration: var(--dure);
  animation-iteration-count: infinite;
}
.sone,.s122, .s111, .s100, .s133{
    stroke-dasharray: 6;
  }
  @keyframes p1 {
     0% {transform: scale(0%);}
   2% {transform: scale(100%);}
   /*
   15% {opacity:1;}
   30% {opacity:0;}
   100% {opacity:0;}
   */
  }
   @keyframes p2 {
    0%  {stroke-dashoffset: 1571;}
    2%  {stroke-dashoffset: 1571;}
    4% {stroke-dashoffset: 0;}
  }  
  @keyframes p4 {
    0%  {stroke-dashoffset: 1571;}
    4%  {stroke-dashoffset: 1571;}
    6% {stroke-dashoffset: 0;}
  }
   @keyframes p6 {
    0%  {stroke-dashoffset: 1571;}
    6%  {stroke-dashoffset: 1571;}
    8% {stroke-dashoffset: 0;}
  }  
  @keyframes p12 {
    0%  {stroke-dashoffset: 1899;}
    8%  {stroke-dashoffset: 1899;}
    10% {stroke-dashoffset: 0;}
  }
    @keyframes p10 {
    0%  {stroke-dashoffset: 1899;}
    10%  {stroke-dashoffset: 1899;}
    12% {stroke-dashoffset: 0;}
  }
  @keyframes p14 {
    0%  {stroke-dashoffset: 1571;}
    12%  {stroke-dashoffset: 1571;}
    14% {stroke-dashoffset: 0;}
  }
  @keyframes p8 {
    0%  {stroke-dashoffset: 1571;}
    14%  {stroke-dashoffset: 1571;}
    16% {stroke-dashoffset: 0;}    
  }