Lines Animation

Memasang Kode Lines Animation
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 50%, #B20000 0%, #333 100%);
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top:-8px;
  width: 100%;
text-align: center;
font-size:  6px;
background: -moz-linear-gradient(top, #B20000 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #B20000 50%, transparent 90%); 
}

#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom:28px;
} 
#Mys2010 a:hover { background-color: transparent;opacity:0.7; } #Mys2010 img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #Mys2010 img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

.center {
  position: absolute;
  width: 40px;
  height: 40px;
  margin-top:220px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.line {
  box-sizing: border-box;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  left: 0;
  background:radial-gradient(circle at 50% 50%, #B20000 0%, blue 100%);
}
.line-1 {
  -webkit-animation: line-1 10s ease-in-out infinite;
          animation: line-1 10s ease-in-out infinite;
}
@-webkit-keyframes line-1 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(0deg) translate(0, 0) scale(1);
            transform: rotate(0deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(0deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(0deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(0deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(0deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(0deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(0deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(0deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(0deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(0deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(0deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(0deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(0deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(0deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
@keyframes line-1 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(0deg) translate(0, 0) scale(1);
            transform: rotate(0deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(0deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(0deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(0deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(0deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(0deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(0deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(0deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(0deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(0deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(0deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(0deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(0deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(0deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-2 {
  -webkit-animation: line-2 10s ease-in-out infinite;
          animation: line-2 10s ease-in-out infinite;
}

@-webkit-keyframes line-2 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(36deg) translate(0, 0) scale(1);
            transform: rotate(36deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(36deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(36deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(36deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(36deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(36deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(36deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(36deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(36deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(36deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(36deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(36deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(36deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(36deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
@keyframes line-2 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(36deg) translate(0, 0) scale(1);
            transform: rotate(36deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(36deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(36deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(36deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(36deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(36deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(36deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(36deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(36deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(36deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(36deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(36deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(36deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(36deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-3 {
  -webkit-animation: line-3 10s ease-in-out infinite;
          animation: line-3 10s ease-in-out infinite;
}

@-webkit-keyframes line-3 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(72deg) translate(0, 0) scale(1);
            transform: rotate(72deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(72deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(72deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(72deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(72deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(72deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(72deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(72deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(72deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(72deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(72deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(72deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(72deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(72deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-3 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(72deg) translate(0, 0) scale(1);
            transform: rotate(72deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(72deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(72deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(72deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(72deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(72deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(72deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(72deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(72deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(72deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(72deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(72deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(72deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(72deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-4 {
  -webkit-animation: line-4 10s ease-in-out infinite;
          animation: line-4 10s ease-in-out infinite;
}

@-webkit-keyframes line-4 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(108deg) translate(0, 0) scale(1);
            transform: rotate(108deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(108deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(108deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(108deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(108deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(108deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(108deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(108deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(108deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(108deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(108deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(108deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(108deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(108deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-4 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(108deg) translate(0, 0) scale(1);
            transform: rotate(108deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(108deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(108deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(108deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(108deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(108deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(108deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(108deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(108deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(108deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(108deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(108deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(108deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(108deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-5 {
  -webkit-animation: line-5 10s ease-in-out infinite;
          animation: line-5 10s ease-in-out infinite;
}

@-webkit-keyframes line-5 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(144deg) translate(0, 0) scale(1);
            transform: rotate(144deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(144deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(144deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(144deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(144deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(144deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(144deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(144deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(144deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(144deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(144deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(144deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(144deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(144deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-5 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(144deg) translate(0, 0) scale(1);
            transform: rotate(144deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(144deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(144deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(144deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(144deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(144deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(144deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(144deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(144deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(144deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(144deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(144deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(144deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(144deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-6 {
  -webkit-animation: line-6 10s ease-in-out infinite;
          animation: line-6 10s ease-in-out infinite;
}

@-webkit-keyframes line-6 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(180deg) translate(0, 0) scale(1);
            transform: rotate(180deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(180deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(180deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(180deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(180deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(180deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(180deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(180deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(180deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(180deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(180deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(180deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(180deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(180deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-6 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(180deg) translate(0, 0) scale(1);
            transform: rotate(180deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(180deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(180deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(180deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(180deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(180deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(180deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(180deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(180deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(180deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(180deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(180deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(180deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(180deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-7 {
  -webkit-animation: line-7 10s ease-in-out infinite;
          animation: line-7 10s ease-in-out infinite;
}

@-webkit-keyframes line-7 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(216deg) translate(0, 0) scale(1);
            transform: rotate(216deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(216deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(216deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(216deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(216deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(216deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(216deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(216deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(216deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(216deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(216deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(216deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(216deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(216deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-7 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(216deg) translate(0, 0) scale(1);
            transform: rotate(216deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(216deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(216deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(216deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(216deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(216deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(216deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(216deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(216deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(216deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(216deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(216deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(216deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(216deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-8 {
  -webkit-animation: line-8 10s ease-in-out infinite;
          animation: line-8 10s ease-in-out infinite;
}

@-webkit-keyframes line-8 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(252deg) translate(0, 0) scale(1);
            transform: rotate(252deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(252deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(252deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(252deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(252deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(252deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(252deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(252deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(252deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(252deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(252deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(252deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(252deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(252deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-8 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(252deg) translate(0, 0) scale(1);
            transform: rotate(252deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(252deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(252deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(252deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(252deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(252deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(252deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(252deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(252deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(252deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(252deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(252deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(252deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(252deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-9 {
  -webkit-animation: line-9 10s ease-in-out infinite;
          animation: line-9 10s ease-in-out infinite;
}

@-webkit-keyframes line-9 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(288deg) translate(0, 0) scale(1);
            transform: rotate(288deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(288deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(288deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(288deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(288deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(288deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(288deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(288deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(288deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(288deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(288deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(288deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(288deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(288deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-9 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(288deg) translate(0, 0) scale(1);
            transform: rotate(288deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(288deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(288deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(288deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(288deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(288deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(288deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(288deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(288deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(288deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(288deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(288deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(288deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(288deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-10 {
  -webkit-animation: line-10 10s ease-in-out infinite;
          animation: line-10 10s ease-in-out infinite;
}

@-webkit-keyframes line-10 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(324deg) translate(0, 0) scale(1);
            transform: rotate(324deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(324deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(324deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(324deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(324deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(324deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(324deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(324deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(324deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(324deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(324deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(324deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(324deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(324deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(324deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(324deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(324deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(324deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-10 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(324deg) translate(0, 0) scale(1);
            transform: rotate(324deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(324deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(324deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(324deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(324deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(324deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(324deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(324deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(324deg) translate(0, -350px) scale(0.5, 0.5);
            transform: rotate(324deg) translate(0, -350px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(344deg) translate(0, -150px) scale(0.5, 0.5) rotate(179deg) translate(-150px, 150px);
            transform: rotate(344deg) translate(0, -150px) scale(0.5, 0.5) rotate(179deg) translate(-150px, 150px);
  }
  90% {
    -webkit-transform: rotate(324deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(324deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(324deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(324deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(324deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(324deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
   background: #24006B;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}/*end*/
img {
  position: absolute;
  top:137px;
  left: 575px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #24006B;
  width: 211px;
  height: 212px;
  z-index: 3;
  opacity: 1;
  animation: photo-ani 20s forwards;
}
/* Keyframes */
@keyframes line-ani {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes photo-ani {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*end*/
.loader-text,
.loader-text::before,
.loader {
  position: absolute;
  top: 0;
  bottom:59px;
  left:-5px;
  right:-5px;
  margin: auto;
  width: 230px;
  height:230px;
}
.loader {
  border-color: #bd313b transparent;
  border-style: solid;
  border-width: 4px;
  border-radius: 50%;
  transform: rotate(0deg);
  animation: spin 2000ms linear infinite, color 2000ms linear infinite;
}
.loader-text::before {
  text-align: center;
  line-height: 200px;
  content: 'Cibeber Cimahi';
  display: block;
  position: absolute;
  color: #1919B3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes color {
  0% {
    border-color: #bd313b transparent;
  }
  25% {
    border-color: #6d31bd transparent;
  }
  50% {
    border-color: #31bdb3 transparent;
  }
  75% {
    border-color: #81bd31 transparent;
  }
  100% {
    border-color: #bd313b transparent;
  }
}

#gif:before {
  content: " ";
  position: absolute;
  height:10px;
  width:10px;
  border-radius:50%;
  top: -155px;
  left: 420px;
  background:green;
  border: 5px solid yellow;
  box-shadow:
    0 355px 0 -5px black,
    0 355px 0 0px orange;
  -webkit-animation: reverseRotate 13s linear infinite;
  animation: reverseRotate 18s linear infinite;
}
#gif:after {
  content: " ";
  position: absolute;
  height:10px;
  width:10px;
  border-radius:50%;
  top: -655px;
  left:920px;
  background:red;
  border:5px solid #555;
  box-shadow:
    0 355px 0 -5px green,
    0 355px 0 0px yellow;
  -webkit-animation: reverseRotate 23s linear infinite;
  animation: reverseRotate 66s linear infinite;
}

@keyframes rotate {
  0%   { transform: rotate(  0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; 
    box-shadow:
      178px 0 0 -25px black,
      178px 0 0 -20px blue,
      -178px 0 0 -25px red,
      -178px 0 0 -20px yellow, 
      0 0 0 20px pink,
      0 0 0 30px white,
      0 0 0 130px black,
      0 0 0 135px green;
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: #f00; 
    box-shadow:
      178px 0 0 -25px blue,
      178px 0 0 -20px green,
      -178px 0 0 -25px blue,
      -178px 0 0 -20px yellow, 
      0 0 0 20px black,
      0 0 0 30px orange,
      0 0 0 130px black,
      0 0 0 135px orange;
  }    
  100% { transform: rotate(360deg); }
}
@keyframes reverseRotate {
  0%   { transform: translateY(378px) rotate(0deg) translateY(-1120px) rotate(0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white; 
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: white; box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white; 
  }    
  100% { transform: translateY(378px) rotate(-720deg) translateY(-178px) rotate(0deg); }
}
@keyframes segmentRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(33000deg); }
}


@-webkit-keyframes rotate {
  0%   { -webkit-transform: rotate(  0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; 
    box-shadow:
      178px 0 0 -25px yellow,
      178px 0 0 -20px #f00,
      -178px 0 0 -25px green,
      -178px 0 0 -20px #ff0, 
      0 0 0 20px black,
      0 0 0 30px #f00,
      0 0 0 130px black,
      0 0 0 135px orange;
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: blue; 
    box-shadow:
      178px 0 0 -25px green,
      178px 0 0 -20px blue,
      -178px 0 0 -25px orange,
      -178px 0 0 -20px blue, 
      0 0 0 20px black,
      0 0 0 30px yellow,
      0 0 0 130px black,
      0 0 0 135px yellow,
  }    
  100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes reverseRotate {
  0%   { -webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white; 
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: white; box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white; 
  }    
  100% { -webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }
}
@-webkit-keyframes segmentRotate {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-32000deg); }
}
</style> 

<div id='gif'>
</div>
  <div class="center">
    <div class="line line-1"></div>
    <div class="line line-2"></div>
    <div class="line line-3"></div>
    <div class="line line-4"></div>
    <div class="line line-5"></div>
    <div class="line line-6"></div>
    <div class="line line-7"></div>
    <div class="line line-8"></div>
    <div class="line line-9"></div>
    <div class="line line-10"></div>
  </div>

<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/07/lines-animation.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
<div id="Mys2010">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBS0CarXAaHLTorhnE9BNjfjZeF8zXIICpk6wG7R-WfpXubwQqpAiJ28TrjzFYkDiZRAUcdS3jit1lJg2JQ-wq9fGfMsuPAAFVComGf71cUiQVnc4bBy6zu2R2vY8pNUabaOiUrH4M3Ar_/s1600-r/Samantha-mys2010.jpg"  />
</div>
<div class="loader-2">
<div class="loader-text">
<div class="loader">
</div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:cyan;"> EDITED BY. <a href="https://Link Download"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:cyan;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/gg1cover/music/Samantha-Mys2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>      

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script>

Audio Code by. Jereme Causing
Lines Animation Code by. Matthias Martin

Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Lines Animation  

Category: Lines Animation

Cole run cycle

Memasang Kode Cole run cycle
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:#12127D;height:100%;overflow:hidden;}
.ap {
position: fixed;
right: 0;
bottom:-3px;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size:  11px; 
 border-bottom:#1bdde4;
 background: #B20000;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, darkred 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 22px;
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:#B20000 ;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}

html {
  overflow-X: hidden;
  height: 100%;
}
html body {
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8E006B), color-stop(100%, #B20000));
  background-image: -moz-linear-gradient(top, #8E006B 0%, #B20000 100%);
  background-image: -webkit-linear-gradient(top, #8E006B 0%, #B20000 100%);
  background-image: linear-gradient(to bottom, #8E006B 0%, #B20000 100%);
  position: relative;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  margin: auto;
  overflow: hidden;
}
html body h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 100;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  font-size: 40px;
  text-align: center;
}
html body .sand {
  position: absolute;
  top: 10%;
  left: -10%;
  width: 120%;
  height: 1000px;
  -moz-border-radius: 50% 50% 0 0/3% 3% 0 0;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 0 0/3% 3% 0 0;
  background:  rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 20px 30px 0 rgba(0, 0, 0, 0.3), 0 -20px 30px 0 rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 20px 30px 0 rgba(0, 0, 0, 0.3), 0 -20px 30px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 20px 30px 0 rgba(0, 0, 0, 0.3), 0 -20px 30px 0 rgba(0, 0, 0, 0.3);
}

      body { text-align: center; }
canvas { display: block; margin: 0 auto; }
</style>

<div class='sand'>
<div align="center" style="margin-top:-22px">
<canvas width="600" height="450"></canvas>
<p>
Speed <input class="speed-range" type="range" min="0" max="0.2" step="0.01" value="0.07"></p>
</div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#330099;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#330099;"> COPYRIGHT <a href="http://sample-mys2010.blogspot.co.id/2016/07/cole-run-cycle.html" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; LET'S STUDY</a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/safe50534/lagu/Darling-Clementine-M2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js">
</script> 
<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>    
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>   
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>    
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script>  
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script> 

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script>

<script>
      /*jshint unused: false, undef: true */
/*global blockSize: false */
// ----- utils ----- //
// extends objects
function extend( a, b ) {
  for ( var prop in b ) {
    a[ prop ] = b[ prop ];
  }
  return a;
}
function modulo( num, div ) {
  return ( ( num % div ) + div ) % div;
}
function normalizeAngle( angle ) {
  return modulo( angle, Math.PI * 2 );
}
function getDegrees( angle ) {
  return angle * ( 180 / Math.PI );
}
// --------------------------  -------------------------- //
function line( ctx, a, b ) {
  ctx.beginPath();
  ctx.moveTo( a.x, a.y );
  ctx.lineTo( b.x, b.y );
  ctx.stroke();
  ctx.closePath();
}
/*jshint browser: true, undef: true, unused: true */
// -------------------------- vector -------------------------- //
function Vector( x, y ) {
  this.x = x || 0;
  this.y = y || 0;
}
Vector.prototype.set = function( v ) {
  this.x = v.x;
  this.y = v.y;
};
Vector.prototype.setCoords = function( x, y ) {
  this.x = x;
  this.y = y;
}
Vector.prototype.add = function( v ) {
  this.x += v.x;
  this.y += v.y;
};
Vector.prototype.subtract = function( v ) {
  this.x -= v.x;
  this.y -= v.y;
};
Vector.prototype.scale = function( s )  {
  this.x *= s;
  this.y *= s;
};
Vector.prototype.multiply = function( v ) {
  this.x *= v.x;
  this.y *= v.y;
};
// custom getter whaaaaaaat
Object.defineProperty( Vector.prototype, 'magnitude', {
  get: function() {
    return Math.sqrt( this.x * this.x  + this.y * this.y );
  }
});
Vector.prototype.equals = function ( v ) {
  return this.x == v.x && this.y == v.y;
};
Vector.prototype.zero = function() {
  this.x = 0;
  this.y = 0;
};
Vector.prototype.block = function( size ) {
  this.x = Math.floor( this.x / size );
  this.y = Math.floor( this.y / size );
};
Object.defineProperty( Vector.prototype, 'angle', {
  get: function() {
    return normalizeAngle( Math.atan2( this.y, this.x ) );
  }
});
// ----- class functions ----- //
// return new vectors
Vector.subtract = function( a, b ) {
  return new Vector( a.x - b.x, a.y - b.y );
};
Vector.add = function( a, b ) {
  return new Vector( a.x + b.x, a.y + b.y );
};
Vector.copy = function( v ) {
  return new Vector( v.x, v.y );
};
Vector.isSame = function( a, b ) {
  return a.x == b.x && a.y == b.y;
};
Vector.getDistance = function( a, b ) {
  var dx = a.x - b.x;
  var dy = a.y - b.y;
  return Math.sqrt( dx * dx + dy * dy );
};
Vector.addDistance = function( vector, distance, angle ) {
  var x = vector.x + Math.cos( angle ) * distance;
  var y = vector.y + Math.sin( angle ) * distance;
  return new Vector( x, y );
};
// --------------------------  -------------------------- //
// -------------------------- Particle -------------------------- //
function Particle( x, y ) {
  this.position = new Vector( x, y );
  this.previousPosition = new Vector( x, y );
}
Particle.prototype.update = function( friction, gravity ) {
  var velocity = Vector.subtract( this.position, this.previousPosition );
  // friction
  velocity.scale( friction );
  this.previousPosition.set( this.position );
  this.position.add( velocity );
  this.position.add( gravity );
};
// --------------------------  -------------------------- //
Particle.prototype.render = function( ctx ) {
  // big circle
  ctx.fillStyle = 'hsla(0, 0%, 10%, 0.5)';
  circle( ctx, this.position.x, this.position.y, 4 );
  // dot
  // ctx.fillStyle = 'hsla(0, 100%, 50%, 0.5)';
  // circle( this.position.x, this.position.y, 5  );
};
function circle( ctx, x, y, radius ) {
  ctx.beginPath();
  ctx.arc( x, y, radius, 0, Math.PI * 2 );
  ctx.fill();
  ctx.closePath();
}
// --------------------------  -------------------------- //
function StickConstraint( particleA, particleB, distance ) {
  this.particleA = particleA;
  this.particleB = particleB;
  if ( distance ) {
    this.distance = distance;
  } else {
    var delta = Vector.subtract( particleA.position, particleB.position );
    this.distance = delta.magnitude;
  }
  this.distanceSqrd = this.distance * this.distance;
}
StickConstraint.prototype.update = function() {
  var delta = Vector.subtract( this.particleA.position, this.particleB.position );
  var mag = delta.magnitude;
  var scale = ( this.distance - mag ) / mag * 0.5;
  delta.scale( scale );
  this.particleA.position.add( delta );
  this.particleB.position.subtract( delta );
};
StickConstraint.prototype.render = function( ctx ) {
  ctx.strokeStyle = 'hsla(200, 100%, 50%, 0.5)';
  ctx.lineWidth = 2;
  line( ctx, this.particleA.position, this.particleB.position );
};
// --------------------------  -------------------------- //
function PinConstraint( particle, position ) {
  this.particle = particle;
  this.position = position;
}
PinConstraint.prototype.update = function() {
  this.particle.position.set( this.position );
};
PinConstraint.prototype.render = function() {};
// --------------------------  -------------------------- //
function SpringAngleConstraint( particleA, particleB, strength, angle ) {
  this.particleA = particleA;
  this.particleB = particleB;
  this.strength = strength;
  if ( angle === undefined ) {
    var delta = Vector.subtract( particleB.position, particleA.position );
    this.angle = delta.angle;
  } else {
    this.angle = angle;
  }
}
SpringAngleConstraint.prototype.update = function() {
  var positionA = this.particleA.position;
  var positionB = this.particleB.position;
  var delta = Vector.subtract( positionB, positionA );
  var deltaAngle = delta.angle;
  var angleDiff = normalizeAngle( this.angle - deltaAngle );
  angleDiff = angleDiff > Math.PI ? angleDiff - Math.PI * 2 : angleDiff;
  var springAngle = deltaAngle + Math.PI / 2;
  var springForce = new Vector( Math.cos( springAngle ), Math.sin( springAngle ) );
  springForce.scale( angleDiff * this.strength * Math.PI * 2 );
  this.particleB.position.add( springForce );
};
SpringAngleConstraint.prototype.render = function( ctx ) {
  var end = Vector.addDistance( this.particleA.position, 50, this.angle );
  ctx.strokeStyle = 'hsla(0, 0%, 50%, 0.5)';
  line( ctx, this.particleA.position, end );
};
// --------------------------  -------------------------- //
function ChainLinkConstraint( particleA, particleB, distance, shiftEase ) {
  this.particleA = particleA;
  this.particleB = particleB;
  this.distance = distance;
  this.distanceSqrd = distance * distance;
  this.shiftEase = shiftEase === undefined ? 0.85 : shiftEase;
}
ChainLinkConstraint.prototype.update = function() {
  var delta = Vector.subtract( this.particleA.position, this.particleB.position );
  var deltaMagSqrd = delta.x * delta.x + delta.y * delta.y;
  if ( deltaMagSqrd <= this.distanceSqrd ) {
    return;
  }
  var newPosition = Vector.addDistance( this.particleA.position, this.distance, delta.angle + Math.PI );
  var shift = Vector.subtract( newPosition, this.particleB.position );
  shift.scale( this.shiftEase );
  this.particleB.previousPosition.add( shift );
  this.particleB.position.set( newPosition );
};
// --------------------------  -------------------------- //
function Ribbon( props ) {
  extend( this, props );
  // create particles
  this.particles = [];
  this.constraints = [];
  this.controlParticle = new Particle( this.controlPoint.x, this.controlPoint.y );
  var pin = new PinConstraint( this.controlParticle, this.controlPoint );
  this.constraints.push( pin );
  var x = this.controlPoint.x;
  for ( var i=0; i < this.sections; i++ ) {
    var y = this.controlPoint.y + this.sectionLength * i;
    var particle = new Particle( x, y );
    this.particles.push( particle );
    // create links
    var linkParticle = i === 0 ? this.controlParticle : this.particles[ i-1 ];
    var link = new ChainLinkConstraint( linkParticle, particle, this.sectionLength, this.chainLinkShiftEase );
    this.constraints.push( link );
  }}
Ribbon.prototype.update = function() {
  var i, len;
  for ( i=0, len = this.particles.length; i < len; i++ ) {
    this.particles[i].update( this.friction, this.gravity );
  }
  for ( i=0, len = this.constraints.length; i < len; i++ ) {
    this.constraints[i].update();
  }
  for ( i=0, len = this.constraints.length; i < len; i++ ) {
    this.constraints[i].update();
  }
};
Ribbon.prototype.addBreeze = function( v ) {
  for ( var i=0, len = this.particles.length; i < len; i++ ) {
    this.particles[i].position.add( v );
  }
};
Ribbon.prototype.render = function( ctx ) {
  ctx.strokeStyle = '#d916d9';
  ctx.lineWidth = this.width;
  ctx.lineCap = 'butt';
  ctx.lineJoin = 'round';
  ctx.beginPath();
  ctx.moveTo( this.controlParticle.x, this.controlParticle.y );
  for ( var i=0, len = this.particles.length; i < len; i++ ) {
    var particle = this.particles[i];
    ctx.lineTo( particle.position.x, particle.position.y );
  }
  ctx.stroke();
  ctx.closePath();
  ctx.lineWidth = 1;
};
// --------------------------  -------------------------- //
// x, y
// angle
// springStrength
// curl
// segmentLength
// friction
// gravity
// movementStrength
function Follicle( props ) {
  extend( this, props );
  delete this.x;
  delete this.y;
  this.particleA = new Particle( props.x, props.y );
  var positionB = Vector.addDistance( this.particleA.position, this.segmentLength, this.angle );
  this.particleB = new Particle( positionB.x, positionB.y );
  this.stick0 = new StickConstraint( this.particleA, this.particleB );
  this.springAngle0 = new SpringAngleConstraint( this.particleA, this.particleB, this.springStrength, this.angle );
  var angle1 = this.angle + this.curl;
  var positionC =  Vector.addDistance( this.particleB.position, this.segmentLength, angle1 );
  this.particleC = new Particle( positionC.x, positionC.y );
  this.stick1 = new StickConstraint( this.particleB, this.particleC );
  this.springAngle1 = new SpringAngleConstraint( this.particleB, this.particleC, this.springStrength, angle1 );
  this.controlPoint = new Vector( props.x, props.y );
  this.pin = new PinConstraint( this.particleA, this.controlPoint );}
Follicle.prototype.update = function() {
  this.particleA.update( this.friction, this.gravity );
  this.particleB.update( this.friction, this.gravity );
  this.particleC.update( this.friction, this.gravity );
  this.stick0.update();
  this.springAngle0.update();
  // update springAngle1's angle
  var delta = Vector.subtract( this.particleB.position, this.particleA.position );
  this.springAngle1.angle = delta.angle + this.curl;
  this.pin.update();
  this.stick1.update();
  this.springAngle1.update();
};
Follicle.prototype.move = function( movement ) {
  movement = Vector.copy( movement );
  this.controlPoint.add( movement );
  movement.scale( this.movementStrength );
  this.particleB.position.add( movement );
  this.particleC.position.add( movement );
  this.particleB.previousPosition.add( movement );
  this.particleC.previousPosition.add( movement );
};
Follicle.prototype.render = function( ctx ) {
  ctx.lineWidth = 46;
  ctx.strokeStyle = '#333';
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo( this.particleA.position.x, this.particleA.position.y );
  ctx.quadraticCurveTo( this.particleB.position.x, this.particleB.position.y,
    this.particleC.position.x, this.particleC.position.y );
  ctx.stroke();
  ctx.closePath();
  // reset line props
  ctx.lineCap = 'butt';
  ctx.lineWidth = 1;
};
// --------------------------  -------------------------- //
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
// --------------------------  -------------------------- //
// --------------------------  -------------------------- //
var friction = 0.75;
var gravity = new Vector( 0, 0.4 );
var movementStrength = 0.2;
var springStrength = 0.5;
var follicles = [];
var pins = [];
var v = new Vector( 112, 110 );
var follicle1 = new Follicle({
  x: v.x,
  y: v.y,
  segmentLength: 54,
  angle: -1.75,
  curl: 1.17,
  friction: friction,
  gravity: gravity,
  springStrength: springStrength,
  movementStrength: movementStrength
});
follicles.push( follicle1 );
v = new Vector( 140, 100 );
var follicle2 = new Follicle({
  x: v.x,
  y: v.y,
  segmentLength: 63,
  angle: -1.33,
  curl: 1.15,
  friction: friction,
  gravity: gravity,
  springStrength: springStrength,
  movementStrength: movementStrength
});
follicles.push( follicle2 );
v = new Vector( 165, 105 );
var follicle3 = new Follicle({
  x: v.x,
  y: v.y,
  segmentLength: 54,
  angle: -1.05,
  curl: 1.15,
  friction: friction,
  gravity: gravity,
  springStrength: springStrength,
  movementStrength: movementStrength
});
follicles.push( follicle3 );
v = new Vector( 178, 113 );
var follicle4 = new Follicle({
  x: v.x,
  y: v.y,
  segmentLength: 52,
  angle: -0.63,
  curl: 1.15,
  friction: friction,
  gravity: gravity,
  springStrength: springStrength,
  movementStrength: movementStrength
});
follicles.push( follicle4 );
v = new Vector( 185, 130 );
var follicle5 = new Follicle({
  x: v.x,
  y: v.y,
  segmentLength: 46,
  angle: -0.29,
  curl: 1.15,
  friction: friction,
  gravity: gravity,
  springStrength: springStrength,
  movementStrength: movementStrength
});
follicles.push( follicle5 );
v = new Vector( 180, 152 );
var follicle6 = new Follicle({
  x: v.x,
  y: v.y,
  segmentLength: 40,
  angle: 0.05,
  curl: 1.15,
  friction: friction,
  gravity: gravity,
  springStrength: springStrength,
  movementStrength: movementStrength
});
follicles.push( follicle6 );
v = new Vector( 160, 166 );
var follicle7 = new Follicle({
  x: v.x,
  y: v.y,
  segmentLength: 30,
  angle: 0.45,
  curl: 0.8,
  friction: friction,
  gravity: gravity,
  springStrength: springStrength,
  movementStrength: movementStrength
});
follicles.push( follicle7 );
// middle bottom
v = new Vector( 145, 166 );
var follicle8 = new Follicle({
  x: v.x,
  y: v.y,
  segmentLength: 26,
  angle: Math.PI / 2,
  curl: 0,
  friction: friction,
  gravity: gravity,
  springStrength: springStrength,
  movementStrength: movementStrength
});
follicles.push( follicle8 );
// compare to 7
v = new Vector( 130, 166 );
var follicle9 = new Follicle({
  x: v.x,
  y: v.y,
  segmentLength: 30,
  angle: 2.7,
  curl: -0.8,
  friction: friction,
  gravity: gravity,
  springStrength: springStrength,
  movementStrength: movementStrength
});
follicles.push( follicle9 );
// compare to 6
v = new Vector( 118, 152 );
var follicle10 = new Follicle({
  x: v.x,
  y: v.y,
  segmentLength: 46,
  angle: 3.20,
  curl: -1.15,
  friction: friction,
  gravity: gravity,
  springStrength: springStrength,
  movementStrength: movementStrength
});
follicles.push( follicle10 );
// compare to 5
v = new Vector( 105, 130 );
var follicle11 = new Follicle({
  x: v.x,
  y: v.y,
  segmentLength: 46,
  angle: -2.8,
  curl: -1.15,
  friction: friction,
  gravity: gravity,
  springStrength: springStrength,
  movementStrength: movementStrength
});
follicles.push( follicle11 );
// compare to 4
v = new Vector( 120, 105 );
var follicle12 = new Follicle({
  x: v.x,
  y: v.y,
  segmentLength: 52,
  angle: -2.5,
  curl: -1.15,
  friction: friction,
  gravity: gravity,
  springStrength: springStrength,
  movementStrength: movementStrength
});
follicles.push( follicle12 );
// --------------------------  -------------------------- //
var ribbon0 = new Ribbon({
  controlPoint: new Vector( 130, 180 ),
  sections: 30,
  width: 40,
  sectionLength: 8,
  friction: 0.95,
  gravity: new Vector( 0, 0.2 ),
  chainLinkShiftEase: 0.9
});
var ribbon1 = new Ribbon({
  controlPoint: new Vector( 130, 180 ),
  sections: 30,
  width: 40,
  sectionLength: 8,
  friction: 0.9,
  gravity: new Vector( 0, 0.25 ),
  chainLinkShiftEase: 0.9
});
// --------------------------  -------------------------- //
var headImg = new Image();
var isHeadImgLoaded;
headImg.onload = function() {
  isHeadImgLoaded = true;
};
headImg.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cole-run-cycle-head.png';
// --------------------------  -------------------------- //
var origin = new Vector( 300, 300 );
var torso = new Vector();
var previousTorso = new Vector();
var coccyx = new Vector();
var head = new Vector();
var leftShoulder, leftElbow, leftWrist, leftHip, leftKnee, leftAnkle, leftToe;
var rightShoulder, rightElbow, rightWrist, rightHip, rightKnee, rightAnkle, rightToe;
var leftThigh, rightThigh;
var leftShoulderOffset = new Vector( -40, 0 );
var rightShoulderOffset = new Vector( 30, 0 );
var shoulderAmplitude = 10;
var armLength = 35;
var leftHipOffset = new Vector( -40, 48 );
var rightHipOffset = new Vector( 10, 48 );
var hipAmplitude = 10;
var legLength = 30;
var footLength = 30;
// --------------------------  -------------------------- //
var cycleTheta = 0;
var cycleSpeed = 0.07;
var PI = Math.PI;
var TAU = PI * 2;
var breeze = new Vector( -0.5, 0 );
function update() {
  previousTorso.set( torso );
  updateCycle();
  var movement = previousTorso.x === 0 ? new Vector() : Vector.subtract( torso, previousTorso );
  ribbon0.controlPoint.add( movement );
  ribbon1.controlPoint.add( movement );
  ribbon0.addBreeze( breeze );
  ribbon1.addBreeze( breeze );
  ribbon0.update();
  ribbon1.update();
  var i, len;
  for ( i=0, len = follicles.length; i < len; i++ ) {
    follicles[i].move( movement );
    follicles[i].update();
  }
  for ( i=0, len = pins.length; i < len; i++ ) {
    pins[i].update();
  }
  for ( i=0, len = follicles.length; i < len; i++ ) {
    follicles[i].stick0.update();
    follicles[i].stick1.update();
  }}
function updateCycle() {
  cycleTheta += cycleSpeed;
  var sin = Math.sin( cycleTheta );
  torso.set( origin );
  var lift = Math.cos( cycleTheta - 1 );
  torso.y -= Math.abs( lift ) * 40;
  // torso.y -= Math.max( 0, Math.cos( cycleTheta * 2 - 2 ) ) * 20;
  coccyx.set( torso );
  coccyx.y += leftHipOffset.y;
  head.set( torso );
  head.y -= 30;
  // shoulder
  var quadFactor = 1.5;
  leftShoulder = Vector.add( torso, leftShoulderOffset );
  var quadSine = sin > 0 ? quadWave( sin, quadFactor ) : sin;
  // var normTheta = normalizeAngle( cycleTheta );
  // var quadSine = Math.floor( cycleTheta / ( TAU/4) ) % 2 ?  quadWave( sin, squareFactor ) : sin;
  leftShoulder.x += quadSine * shoulderAmplitude;
  // elbow
  var leftElbowAngle = -quadSine * 1.0 + 1.7;
  leftElbow = Vector.addDistance( leftShoulder, armLength, leftElbowAngle );
  // wrist
  var leftWristAngle = leftElbowAngle - quadSine * 0.4 - PI / 2;
  leftWrist = Vector.addDistance( leftElbow, armLength, leftWristAngle );
  // hip
  leftHip = Vector.add( torso, leftHipOffset );
  leftHip.x += -quadSine * hipAmplitude;
  // knee
  var leftKneeAngle = quadSine * 0.9 + 1.5;
  leftKnee = Vector.addDistance( leftHip, legLength, leftKneeAngle );
  leftThigh = Vector.addDistance( leftHip, legLength/2, leftKneeAngle );
  // ankle
  var ankleTheta = cycleTheta - TAU/8;
  var normAnkleTheta = normalizeAngle( ankleTheta );
  var ankleAngle = Math.max( 0, Math.sin( normAnkleTheta * 2/3 ) ) * 2 - 1;
  var leftAnkleAngle = ( ankleAngle + 1 ) * 0.75;
  leftAnkleAngle += leftKneeAngle;
  leftAnkle = Vector.addDistance( leftKnee, legLength, leftAnkleAngle );
  leftToe = Vector.addDistance( leftAnkle, footLength, leftAnkleAngle - TAU/4 );
  // right
  // shoulder
  quadSine = sin < 0 ? quadWave( sin, quadFactor ) : sin;
  rightShoulder = Vector.add( torso, rightShoulderOffset );
  rightShoulder.x += quadSine * shoulderAmplitude * -1;
  // elbow
  var rightElbowAngle = quadSine * 1.0 + 1.7;
  rightElbow = Vector.addDistance( rightShoulder, armLength, rightElbowAngle );
  // wrist
  var rightWristAngle = rightElbowAngle + quadSine * 0.4 - PI / 2;
  rightWrist = Vector.addDistance( rightElbow, armLength, rightWristAngle );
  // hip
  rightHip = Vector.add( torso, rightHipOffset );
  rightHip.x += quadSine * hipAmplitude;
  // knee
  var rightKneeAngle = -quadSine * 0.9 + 1.5;
  rightKnee = Vector.addDistance( rightHip, legLength, rightKneeAngle );
  rightThigh = Vector.addDistance( rightHip, legLength/2, rightKneeAngle );
  // ankle
  ankleTheta = cycleTheta - TAU/8 + TAU/2;
  normAnkleTheta = normalizeAngle( ankleTheta );
  ankleAngle = Math.max( 0, Math.sin( normAnkleTheta * 2/3 ) ) * 2 - 1;
  var rightAnkleAngle = ( ankleAngle + 1 ) * 0.75;
  rightAnkleAngle += rightKneeAngle;
  rightAnkle = Vector.addDistance( rightKnee, legLength, rightAnkleAngle );
  rightToe = Vector.addDistance( rightAnkle, footLength, rightAnkleAngle - TAU/4 );
}
var scale = 1;
function render() {
  ctx.clearRect( 0, 0, w, h );
  ctx.save();
  ctx.scale( scale, scale );
  ctx.save();
  ctx.translate( 150, 50 );
  ribbon0.render( ctx );
  ribbon1.render( ctx );
  for ( var i=0, len = follicles.length; i < len; i++ ) {
    follicles[i].render( ctx );
  }
  ctx.restore();
  renderIllo();
  ctx.restore();
  // renderSkeleton();
}
var brownSkin = '#CC0099';
var black = '#12127D';
var magenta = '#CC0099';
function renderIllo() {
  // right arm
  renderIlloArm( rightShoulder, rightElbow, rightWrist, true );
  // right leg
  renderIlloLeg( rightHip, rightKnee, rightAnkle, rightThigh, rightToe, black );
  // torso bottom
  ctx.fillStyle = black;
  ctx.beginPath();
  ctx.arc( leftHip.x + 15, leftHip.y - 15, 42, TAU/4, -TAU/4 );
  ctx.fill();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc( rightHip.x - 15, rightHip.y - 15, 42, -TAU/4, TAU/4 );
  ctx.fill();
  ctx.closePath();
  ctx.fillRect( leftHip.x + 14.5, torso.y - 9, ( rightHip.x - 14.5) - (leftHip.x + 14.5), 84 );
  // torso top
  ctx.fillStyle = black;
  fillCircle( Vector.add( torso, { x: -33, y: 0 } ), 25 );
  fillCircle( Vector.add( torso, { x: 18, y: 0 } ), 25 );
  // fillCircle( Vector.add( rightShoulder, { x: -15, y: 0 } ), 25 );
  ctx.fillRect( torso.x - 33, torso.y - 25, 56, 50 );
  // head
  if ( isHeadImgLoaded ) {
    ctx.drawImage( headImg, torso.x - 70, torso.y - 145 );
  }
  // left leg
  renderIlloLeg( leftHip, leftKnee, leftAnkle, leftThigh, leftToe, magenta );
  // left arm
  renderIlloArm( leftShoulder, leftElbow, leftWrist );
}
function renderIlloArm( shoulder, elbow, wrist, hasBand ) {
  ctx.strokeStyle = brownSkin;
  ctx.lineWidth = 45;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  ctx.beginPath();
  ctx.moveTo( shoulder.x, shoulder.y );
  ctx.lineTo( elbow.x, elbow.y );
  ctx.lineTo( wrist.x, wrist.y );
  ctx.stroke();
  ctx.closePath();
  if ( hasBand ) {
    ctx.strokeStyle = magenta;
    ctx.beginPath();
    ctx.moveTo( elbow.x, elbow.y );
    ctx.lineTo( wrist.x, wrist.y );
    ctx.stroke();
    ctx.closePath();
  }
  // ctx.fillStyle = !hasBand ? magenta : brownSkin;
  ctx.fillStyle = brownSkin;
  fillCircle( wrist, 28 );
}
function fillCircle( v, radius ) {
  ctx.beginPath();
  ctx.arc( v.x, v.y, radius, 0, TAU );
  ctx.fill();
  ctx.closePath();
}
function renderIlloLeg( hip, knee, ankle, thigh, toe, footColor ) {
  ctx.lineWidth = 45;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  ctx.strokeStyle = black;
  ctx.beginPath();
  ctx.moveTo( hip.x, hip.y );
  ctx.lineTo( knee.x, knee.y );
  ctx.lineTo( ankle.x, ankle.y );
  ctx.stroke();
  ctx.closePath();
  // foot
  ctx.lineCap = 'round';
  ctx.lineWidth = 50;
  ctx.strokeStyle = magenta;
  ctx.beginPath();
  ctx.moveTo( ankle.x, ankle.y );
  ctx.lineTo( toe.x, toe.y );
  ctx.stroke();
  ctx.closePath();}
function dot( ctx, v ) {
  ctx.beginPath();
  ctx.arc( v.x, v.y, 6, 0, Math.PI * 2 );
  ctx.fill();
  ctx.closePath();
}
// i: sin or cos
// b: square factor
function quadWave( i, b ) {
  return Math.sqrt( ( 1 + b * b ) / ( 1 + b * b * i * i ) ) * i;
}
var isAnimating = false;
function animate() {
  update();
  render();
  requestAnimationFrame( animate );}
function start() {
  isAnimating = true;
}
// --------------------------  -------------------------- //
animate();
var speedRange = document.querySelector('.speed-range')
speedRange.onchange = function() {
  cycleSpeed = parseFloat( speedRange.value );
};
    </script>

Audio Code by. Jereme Causing
Cole run cycle Code by. David DeSandro

Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Cole run cycle 

Category: Cole run cycle