<svg class="hide" id="main">
  <symbol id="planet-1" viewBox="-3 -3 180 103"><g>    
    <circle class="drawPath" cx="109.7" cy="52.3" r="5.7" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.71"/>
    <circle class="drawPath"  cx="26.6" cy="23" r="7.6" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.53"/>
    <path class="drawPath" d="M134.2,62.4A253.6,253.6,0,0,1,91.2,76.3a254,254,0,0,1-44.8,6.5A50.2,50.2,0,0,0,134.2,62.4Z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
    <path class="drawPath"  d="M134.2,62.4a50.1,50.1,0,0,0-10-42.9,50.1,50.1,0,0,1,10,42.9c23.1-10,37.3-21.7,35.2-30.8s-20-13.3-45.2-12.1A50.2,50.2,0,0,0,36.4,40C13.3,50.1-.9,61.7,1.2,70.8s20,13.3,45.2,12.1A50.1,50.1,0,0,1,36.4,40a50.1,50.1,0,0,0,10,42.9" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
    <path class="drawPath"  d="M54.2,28.3A34.9,34.9,0,0,1,66.3,17.7" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <path class="drawPath"  d="M46.4,50a34.5,34.5,0,0,1,4.5-17.1" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    </g></symbol>
  
<symbol id="planet-2" viewBox="0 0 180 115">
 <g>
        <path class="drawPath"  d="M173.7,49.5c-0.2-9.3-16.9-17.1-41.7-21.2a50.2,50.2,0,0,0-90.2,1.8C17.2,35.1.8,43.6,1,52.9S17.9,70.1,42.7,74.1a50.2,50.2,0,0,0,90.2-1.8C157.5,67.3,173.9,58.8,173.7,49.5Z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
        <path class="drawPath"  d="M41.8,30.1a50.1,50.1,0,0,0,.9,44A254.3,254.3,0,0,0,87.9,77a254.3,254.3,0,0,0,45-4.7,50.1,50.1,0,0,0-.9-44" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>

      <path class="drawPath"  d="M137.5,50.4c19.8,13.3,33.1,27.5,29.7,35.9-5.5,13.4-46.4,9.3-91.4-9.2S-1,32.7,4.5,19.2c4-9.8,18.3-11.4,47.7-3.8" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
    <circle class="drawPath"  cx="62.5" cy="55.2" r="4" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
    <line class="drawPath"  x1="57.8" y1="10.7" x2="57.8" y2="10.7" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.71"/>
    <line class="drawPath"  x1="105.2" y1="34.7" x2="136.4" y2="46.4" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <line class="drawPath"  x1="59" y1="10.1" x2="83.3" y2="19.2" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <line class="drawPath"  x1="80.4" y1="7.1" x2="104.8" y2="16.2" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <line class="drawPath"  x1="124.7" y1="51.6" x2="137.2" y2="56.4" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <line class="drawPath"  x1="43.1" y1="29.9" x2="49.4" y2="32.3" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <line class="drawPath"  x1="37.8" y1="50.4" x2="50.2" y2="55.1" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <line class="drawPath"   x1="93" y1="88.3" x2="111.4" y2="95.2" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <line class="drawPath" x1="79.7" y1="50.1" x2="94.4" y2="55.7" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <line class="drawPath" x1="49" y1="83.6" x2="65.1" y2="89.7" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
  </g>
</symbol>
  
<symbol id="moon-crescent" viewBox="0 -5 95 110">
  <g>    
    <path class="drawPath" d="M91.1,80.3a0.8,0.8,0,0,1,.7,1.3A50.5,50.5,0,1,1,39.9,2.1,50.9,50.9,0,0,1,46.6,1a0.6,0.6,0,0,1,.5.9c-12.4,14.3-16.4,34-9,51C47,73.4,67.8,81.4,91.1,80.3Z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
    <path class="drawPath" d="M53.4,32l-1.2-3.5-0.2-.2-3.5-1.2a0.2,0.2,0,0,1,0-.3l3.5-1.2,0.3-.3,1.2-3.5a0.2,0.2,0,0,1,.3,0l1.2,3.5,0.3,0.3,3.5,1.2a0.2,0.2,0,0,1,0,.3l-3.5,1.2-0.2.2L53.6,32A0.2,0.2,0,0,1,53.4,32Z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
    <path class="drawPath" d="M63.2,19.2l-0.7-2H62.4l-2-.7a0.1,0.1,0,0,1,0-.2l2-.7,0.2-.2,0.7-2h0.2l0.7,2,0.2,0.2,2,0.7a0.1,0.1,0,0,1,0,.2l-2,.7H64.1l-0.7,2H63.2Z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/></g></symbol> 
  
<symbol id="moon-full" viewBox="0 0 103 105">
  <g>    
  <circle class="drawPath" class="drawPath" cx="51" cy="51" r="50" fill="none"  stroke-miterlimit="10" stroke-width="2"/>
    <circle class="drawPath" cx="22.5" cy="43.5" r="6.4" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
    <circle class="drawPath" cx="78.3" cy="42.4" r="12.1" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
    <circle class="drawPath" cx="53.2" cy="74.3" r="7.3" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
  </g>
  </symbol>
  
<symbol id="constellation" viewBox="0 -1 130 104"><g> 
      <polyline class="drawPath" points="5.3 11.8 46.5 4.3 46.5 28.4 20.9 35.3 5.3 11.8" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
      <polyline class="drawPath" points="125.8 97.3 106.1 65.7 81.2 41.6 46.4 28.4" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/>
      <polygon class="drawPath" fill="#ffffff" points="124.9 93.3 127.1 90.9 126.9 94.1 130.2 93.9 127.7 96.1 130.2 98.3 126.9 98.1 127.1 101.4 124.9 99 122.7 101.4 122.8 98.1 119.6 98.3 122 96.1 119.6 93.9 122.8 94.1 122.7 90.9 124.9 93.3"/>
    <polygon class="drawPath" fill="#ffffff" points="105.9 62.8 108.1 60.3 108 63.6 111.2 63.4 108.8 65.6 111.2 67.8 108 67.6 108.1 70.8 105.9 68.4 103.7 70.8 103.9 67.6 100.6 67.8 103.1 65.6 100.6 63.4 103.9 63.6 103.7 60.3 105.9 62.8"/>
    <polygon class="drawPath" fill="#ffffff" points="81.5 39 83.7 36.6 83.6 39.9 86.8 39.7 84.4 41.9 86.8 44.1 83.6 43.9 83.7 47.1 81.5 44.7 79.3 47.1 79.5 43.9 76.2 44.1 78.7 41.9 76.2 39.7 79.5 39.9 79.3 36.6 81.5 39"/>
    <polygon class="drawPath" fill="#ffffff" points="46.4 2.4 48.6 0 48.5 3.2 51.7 3.1 49.3 5.3 51.7 7.4 48.5 7.3 48.6 10.5 46.4 8.1 44.2 10.5 44.4 7.3 41.1 7.4 43.6 5.3 41.1 3.1 44.4 3.2 44.2 0 46.4 2.4"/>
    <polygon class="drawPath" fill="#ffffff" points="5.3 8.4 7.5 6 7.3 9.2 10.6 9.1 8.2 11.2 10.6 13.4 7.3 13.2 7.5 16.5 5.3 14.1 3.1 16.5 3.3 13.2 0 13.4 2.4 11.2 0 9.1 3.3 9.2 3.1 6 5.3 8.4"/>
    <polygon class="drawPath" fill="#ffffff" points="46.8 24.9 49 22.5 48.9 25.7 52.1 25.6 49.7 27.7 52.1 29.9 48.9 29.8 49 33 46.8 30.6 44.6 33 44.8 29.8 41.5 29.9 44 27.7 41.5 25.6 44.8 25.7 44.6 22.5 46.8 24.9"/>
    <polygon class="drawPath" fill="#ffffff" points="20.6 31.7 22.8 29.2 22.6 32.5 25.9 32.3 23.4 34.5 25.9 36.7 22.6 36.5 22.8 39.7 20.6 37.3 18.4 39.7 18.5 36.5 15.3 36.7 17.7 34.5 15.3 32.3 18.5 32.5 18.4 29.2 20.6 31.7"/>
</g></symbol>
  
<symbol id="comet" viewBox="0 -4 106 108">
  <g>
    <path class="drawPath" d="M1,41.3L52.6,92.9a25.2,25.2,0,0,0,10.6,6.3,27,27,0,0,0,26.7-7c10.5-10.5,10.8-27.2.7-37.3S39.4,5,39.4,5" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-width="2"/>
    <path class="drawPath" d="M84.2,58.8c7.8,6.6,8.5,18.7,1.5,27a19.8,19.8,0,0,1-19,6.8,17.7,17.7,0,0,1-7.8-3.8c-7.8-6.6-8.5-18.7-1.5-27S76.4,52.2,84.2,58.8Z" fill="none" stroke="#ffffff" stroke-miterlimit="10" stroke-width="2"/>
    <line class="drawPath" x1="45.3" y1="66.6" x2="20" y2="41.4" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <line class="trail drawPath" x1="49.6" y1="52.3" x2="16.8" y2="19.5" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <line class="trail drawPath" x1="61.8" y1="45.8" x2="16.9" y2="1" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <path class="drawPath" d="M31.5,15.5" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <line class="trail drawPath" x1="14.7" y1="36.1" x2="1" y2="22.4" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
  </g>
</symbol>

<symbol id="galaxy" viewBox="0 -2 110 115">
  <g>
      <path class="drawPath" d="M57.1,95.9C37,90.2,19.6,77.1,12.6,60.5,4.3,40.7,17.6,22.4,42.2,19.7c20-2.2,41.7,9,48.4,25.1,5.5,13.1-3.3,25.1-19.5,26.9-13.2,1.5-27.9-5.8-32-16.5s4.6-17.7,15.2-15.5" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <path class="drawPath" class="drawPath" d="M86,98.5a71.2,71.2,0,0,1-10.6.4" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <path class="drawPath" d="M118,57.4c-2.7,15.1-16.4,27-37.1,29.8-24.2,3.3-51-9.9-59.8-29.4C13.8,42,23.9,27,43.5,24.3,59.5,22.2,77.1,30.9,83,43.8c4.8,10.5-1.3,22.1-14.8,22.1-11.2,0-20.4-5.3-23.6-12.2" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <path class="drawPath" d="M115,36.5a40,40,0,0,1,2.9,8.9" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <path class="drawPath" d="M65.8,5.5c21.5,7.4,38.6,23.6,42,41.8,3.6,19.8-14.1,35-39.6,34.1C47.4,80.6,28.4,67,25.3,51c-2.5-13,8.8-24.1,26.2-22.7S81.2,42.3,76.3,52.7s-15.9,5.6-15.9,5.6" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <path class="drawPath" class="drawPath" d="M42.8,1.2A77.8,77.8,0,0,1,56.3,2.8" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <path class="drawPath" d="M19.3,14.6c14.5-6,33.9-5.6,51.8,2.3,22.6,9.9,33.7,30.7,24.8,46.5C88.7,76.2,68.1,80,49.7,72,34.9,65.4,28.7,53.6,33.4,42.8s19.9-13.6,31.5-5.4" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
    <path class="drawPath" d="M1.1,31.4a32.4,32.4,0,0,1,8-9.3" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
  </g>
</symbol>
  <symbol viewbox="0 0 100 100" id="star-1">
  <path d="M54.3,2L65.7,36.2a1.4,1.4,0,0,0,1.3.9h36.8a1.4,1.4,0,0,1,.8,2.5L74.8,61.9a1.4,1.4,0,0,0-.5,1.5L85.6,98.4a1.4,1.4,0,0,1-2.1,1.5L53.8,78.3a1.4,1.4,0,0,0-1.6,0L22.5,99.9a1.4,1.4,0,0,1-2.1-1.5L31.8,63.5a1.4,1.4,0,0,0-.5-1.5L1.6,40.6a1.4,1.4,0,0,1,.8-2.5H39.1a1.4,1.4,0,0,0,1.3-.9L51.8,2A1.4,1.4,0,0,1,54.3,2Z" fill="white" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
  </symbol>
  <symbol viewbox="0 0 110 110" id="star-2">
   <path d="M65.6,75.7l17.3,6.8a0.6,0.6,0,0,0,.8-0.8L76.5,64.8a0.6,0.6,0,0,1,.4-0.8l33.8-7.8a0.6,0.6,0,0,0,0-1.2L76.8,48.3a0.6,0.6,0,0,1-.4-0.8l6.5-16.7a0.6,0.6,0,0,0-.8-0.8L65,37.4a0.6,0.6,0,0,1-.8-0.4l-8-34.6a0.6,0.6,0,0,0-1.2,0L48.2,36.8a0.6,0.6,0,0,1-.8.4L31.3,31a0.6,0.6,0,0,0-.8.8l7,16.2a0.6,0.6,0,0,1-.4.8L2.4,56.8a0.6,0.6,0,0,0,0,1.2l35.1,6.9a0.6,0.6,0,0,1,.4.8L31.4,82.5a0.6,0.6,0,0,0,.8.8l16-6.9a0.6,0.6,0,0,1,.8.4l7.9,33.8a0.6,0.6,0,0,0,1.2,0l6.8-34.5A0.6,0.6,0,0,1,65.6,75.7Z" fill="white" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
      <symbol viewbox="0 0 50 50" id="star-3">
   <path d="M25.3,2.2l3.9,15a1.6,1.6,0,0,0,1.1,1.1l15,3.9a1.6,1.6,0,0,1,0,3l-15,3.9a1.6,1.6,0,0,0-1.1,1.1l-3.9,15a1.6,1.6,0,0,1-3,0l-3.9-15a1.6,1.6,0,0,0-1.1-1.1l-15-3.9a1.6,1.6,0,0,1,0-3l15-3.9a1.6,1.6,0,0,0,1.1-1.1l3.9-15A1.6,1.6,0,0,1,25.3,2.2Z" fill="white" stroke="#fff" stroke-miterlimit="10" stroke-width="4"/>
    </symbol>
  
</svg>


<div class="stars-wrapper">
  <div id='stars'></div>
  <div id='stars2'></div>
  <div id='stars3'></div>
</div>
<div id="main-wrapper"></div>
<div id="toggle-wrapper">
  <div>
  <p>animations</p>
<div class="toggle-container">
  <input type="checkbox" id="toggle"/>
  <label for="toggle" class="toggle">
    <div class="toggle-handler">
<svg  viewBox="0 0 103 105" class="moon-toggle">
  <g>    
  <circle cx="51" cy="51" r="50" fill="none"  stroke-miterlimit="10" stroke-width="2"/>
    <circle cx="22.5" cy="43.5" r="6.4" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
    <circle cx="78.3" cy="42.4" r="12.1" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
    <circle cx="53.2" cy="74.3" r="7.3" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
  </g>
  </svg>
      </div>
  </label>
  </div>
</div>
</div>

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #150d35;
  padding: 0;
  margin: 0;
}
* {
  box-sizing: border-box;
}
body {
  background: #81a6e0;
  background: linear-gradient(to bottom, #81a6e0 0%, #cc7bc5 100%);
}

svg {
  opacity: 1;
}
svg.hide {
  diplay: none;
}

svg * {
  stroke: inherit;
  transform: inherit;
  transform-origin: inherit;
  animation-delay: inherit;
  stroke: #ffffff;
  // stroke-width:inherit;
}

svg {
  width: 80px;
  height: 60px;
  margin: 10px;
  opacity: 0.9;
  position: absolute;
}
svg.star {
  width: 12px;
  height: 12px;
  opacity: 0.4;
}
.stars-wrapper {
  opacity: 0.6;
  width: 100%;
  height: 100%;
  position: absolute;
}
#main-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
}

// toggle
@import url("https://fonts.googleapis.com/css?family=Kodchasan:700");
$pink: #BF85CB;
$purple: #81A6E0;

#toggle-wrapper {
  width: 280px;
  height: 160px;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0 0 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Kodchasan", Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  color: #81a6e0;
  p {
    margin-top: 0;
  }
}


.toggle-container {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
}
input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    left: -99em;
}
.toggle {
  cursor: pointer;
  position: relative;
  width: 100px;
  height: 50px;
  background-color: $purple;
  border-radius: 30px;
  transition: background-color 0.2s cubic-bezier(0.6, 0, 0.2, 1);
  &:before,
  &:after {
    position: absolute;
    top: 15px;
  }
  &:before {
    content: "OFF";
    left: -58px;
    color: $pink;
  }
  &:after {
    content: "ON";
    right: -48px;
    color: $purple;
  }
}
.moon-toggle {
  margin:0;
  width: 100%;
  height: 100%;
  transform: rotate(95deg);
  transform-origin: 50% 50%;
  transition: all 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}
.toggle-handler {
  margin: 0;
  position: relative;
  top: 3px;
  left: 3px;
  width: 44px;
  height: 44px;
  border-radius: 30px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}

input:checked {
  + .toggle {
    background-color: $pink;

    &:before {
      color: $purple;
    }
    &:after {
      color: $pink;
    }
    .toggle-handler {
      transform: translateX(50px);
    }
    .moon-toggle {
      transform: rotate(0deg);
    }
  }
}

// Starts by Saransh Sinha
// https://codepen.io/saransh/pen/BKJun

@function multiple-box-shadow ($n) {
  $value: "#{random(2000)}px #{random(2000)}px #FFF";
  @for $i from 2 through $n {
    $value: "#{$value} , #{random(2000)}px #{random(2000)}px #FFF";
  }

  @return unquote($value);
}

$shadows-small: multiple-box-shadow(700);
$shadows-medium: multiple-box-shadow(200);
$shadows-big: multiple-box-shadow(100);

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: $shadows-small;
  animation: animStar 50s linear infinite;

  &:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: $shadows-small;
  }
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: $shadows-medium;
  animation: animStar 100s linear infinite;

  &:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: $shadows-medium;
  }
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: $shadows-big;
  animation: animStar 150s linear infinite;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

let w = window.innerWidth;
let h = window.innerHeight;
let animated = false;

const select = function(el) {
  return document.getElementById(el);
};

const wrapper = select("main-wrapper");
const checkBox = select("toggle");
const images = [
  { id: "#planet-1", name:"planet-1" },
  { id: "#planet-2", name:"planet-2" },
  { id: "#moon-crescent", name:"moon-crescent" },
  { id: "#moon-full", name:"moon-full" },
  { id: "#constellation", name:"constellation" },
  { id: "#comet", name:"comet" },
  { id: "#galaxy", name:"galaxy" }
];
const stars = ["#star-1", "#star-2", "#star-3"];

checkBox.addEventListener("change", checkStatus);

window.addEventListener("resize", function() {
  w = window.innerWidth;
  h = window.innerHeight;
  init();
});

// building the pattern
function El(image, x, y, delay) {
  this.image = image;
  this.x = x;
  this.y = y;
  this.delay = delay;
}

El.prototype.attach = function() {
  this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  this.use = document.createElementNS("http://www.w3.org/2000/svg", "use");
  this.use.setAttributeNS(
    "http://www.w3.org/1999/xlink",
    "xlink:href",
    this.image.id
  );
  this.svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
  this.svg.setAttribute(
    "style",
    "top: " +
      this.y +
      "px; left: " +
      this.x +
      "px; animation-delay: " +
      this.delay +
      "s;"
  );
};

function Star(image, x, y) {
  this.image = image;
  this.x = x;
  this.y = y;
}

Star.prototype.attach = function() {
  this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  this.use = document.createElementNS("http://www.w3.org/2000/svg", "use");
  this.use.setAttributeNS(
    "http://www.w3.org/1999/xlink",
    "xlink:href",
    this.image
  );
  this.svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
  this.svg.setAttribute(
    "style",
    "top: " + this.y + "px; left: " + this.x + "px;"
  );
  this.svg.setAttribute("class", "star");
};

const spacing = 130;
let i, s;

function init() {
  while (wrapper.firstChild) {
    wrapper.removeChild(wrapper.firstChild);
  }
  i = 0;
  s = 0;

  for (let y = 0; y <= h; y += spacing) {
    if (y % (spacing * 2) === 0) {
      for (let x = 0; x <= w; x += spacing) {
        if (x % (spacing * 2) === 0) {
          draw(x, y + 10);
        } else {
          draw(x, y - 10);
        }
      }
    } else {
      for (let x = -(spacing / 2); x <= w; x += spacing) {
        if ((x + spacing / 2) % (2 * spacing) === 0) {
          draw(x, y + 10);
        } else {
          draw(x, y - 10);
        }
      }
    }
  }
  const newSpacing = spacing - 40;
  for (let y = newSpacing; y <= h; y += spacing) {
    for (let x = -(spacing / 2); x <= w; x += spacing) {
      if ((x + spacing / 2) % (2 * spacing) === 0) {
        drawStar(x, y + 10);
      } else {
        drawStar(x, y - 10);
      }
    }
  }
}

function draw(x, y) {
  const image = images[i];
  const delay = Math.floor(Math.random() * 2);
  const el = new El(image, x, y, delay);
  if (i === images.length - 1) {
    i = 0;
  } else {
    i++;
  }
  el.attach();
  el.svg.appendChild(el.use);
  wrapper.appendChild(el.svg);
}

function drawStar(x, y) {
  const image = stars[s];
  const star = new Star(image, x, y);
  if (s === stars.length - 1) {
    s = 0;
  } else {
    s++;
  }
  star.attach();
  star.svg.appendChild(star.use);
  wrapper.appendChild(star.svg);
}

init();

// animation functions
const moonFull = document.querySelector("symbol#moon-full");
const galaxy = document.querySelector("symbol#galaxy");
const planet1 = document.querySelector("symbol#planet-1");
const planet2 = document.querySelector("symbol#planet-2");
const moonCrescent = document.querySelector("symbol#moon-crescent");
const comet = document.querySelector("symbol#comet");
const constellationStars = document.querySelectorAll(
  "symbol#constellation polygon"
);
let cometLines = document.querySelectorAll("symbol#comet .trail");

const tlMoonFull = new TimelineMax({ repeat: -1, paused: true });
tlMoonFull.to(moonFull, 20, { rotation: 360, ease: Power0.easeNone });

const tlGalaxy = new TimelineMax({ repeat: -1, yoyo: true, paused: true });
tlGalaxy.to(galaxy, 5, { rotationX: -45, ease: Power0.easeNone });

const tlPlanet1 = new TimelineMax({ repeat: -1, yoyo: true, paused: true });
tlPlanet1
  .to(planet1, 2, { rotation: 7, ease: Power0.easeNone })
  .to(planet1, 2, { rotation: -2, ease: Power0.easeNone });

const tlPlanet2 = new TimelineMax({ repeat: -1, yoyo: true, paused: true });
tlPlanet2.to(planet2, 0.5, { x: 1, y: 1, ease: Power0.easeNone });

const tlComet = new TimelineMax({ repeat: -1, yoyo: true, paused: true });
const tlCometTrail = new TimelineMax({ repeat: -1, yoyo: true, paused: true });
tlComet.to(comet, 0.15, { x: 1, y: 1, ease: Power0.easeNone });
cometLines.forEach((el, i) => {
  const x2 = parseInt(el.getAttribute("x2")) - 10;
  const y2 = parseInt(el.getAttribute("y2")) - 10;
  let tl = new TimelineMax({ repeat: -1, yoyo: true });
  tl.to(el, 1, { attr: { x2: x2, y2: y2 }, ease: Linear.easeNone });
  tlCometTrail.add(tl, i / 2);
});

const tlMoonCrescent = new TimelineMax({
  repeat: -1,
  yoyo: true,
  paused: true
});
tlMoonCrescent
  .to(moonCrescent, 2, { rotation: 5, ease: Power0.easeNone })
  .to(moonCrescent, 2, { rotation: -5, ease: Power0.easeNone });

const tlConstellation = new TimelineMax({ repeat: -1, paused: true });
constellationStars.forEach((el, i) => {
  var tl = new TimelineMax({ repeat: -1, yoyo: true });
  tl.to(el, 1, { opacity: 0.3, ease: Linear.easeNone });
  tlConstellation.add(tl, i);
});

function checkStatus() {
  if (checkBox.checked) {
    animated = true;
    startAnimation();

  } else {
    animated = false;
    stopAnimation();
  }
}

function startAnimation() {
  tlMoonFull.play();
  tlMoonCrescent.play();
  tlPlanet1.play();
  tlPlanet2.play();
  tlGalaxy.play();
  tlComet.play();
  tlCometTrail.play();
  tlConstellation.play();
  planet1DrawTl.play();
  planet2DrawTl.play();
  moonFullDrawTl.play();
  moonCrescentDrawTl.play();
  galaxyDrawTl.play();
  constellationDrawTl.play();
  cometDrawTl.play();
}

function stopAnimation() {
  tlMoonFull.pause();
  tlMoonCrescent.pause();
  tlPlanet1.pause();
  tlPlanet2.pause();
  tlGalaxy.pause();
  tlComet.pause();
  tlCometTrail.pause();
  tlConstellation.pause();
  planet1DrawTl.pause();
  planet2DrawTl.pause();
  moonFullDrawTl.pause();
  moonCrescentDrawTl.pause();
  galaxyDrawTl.pause();
  constellationDrawTl.pause();
  cometDrawTl.pause();
}


// images.map(el => {
//     const element = el.id + ' .drawPath';
//     const objectPaths = document.querySelectorAll(element);
//     const objectTl = new TimelineMax({repeat: -1, yoyo: true, paused: true});
//     const delay = Math.floor (Math.random() * 20) + 10;
//     const repeatDelay = Math.floor (Math.random() * 40) + 20;
//     // animating
//     objectPaths.forEach((path, i) => {
//       const tl = new TimelineMax({repeatDelay:repeatDelay, delay:delay, paused: false})
//       tl.to(path, 3, {drawSVG:"0%"});
//       objectTl.add(tl, i);
//     })
//   })

const planet1Draw = document.querySelectorAll('#planet-1 .drawPath');
const planet1DrawTl = new TimelineMax({repeat: -1, yoyo: true, paused: true});
planet1Draw.forEach((path, i) => {
  const tl = new TimelineMax({repeatDelay:40, delay:10})
  tl.to(path, 3, {drawSVG:"0%"});
  planet1DrawTl.add(tl, i);
})

const planet2Draw = document.querySelectorAll('#planet-2 .drawPath');
const planet2DrawTl = new TimelineMax({repeat: -1, yoyo: true, paused: true});
planet2Draw.forEach((path, i) => {
  const tl = new TimelineMax({repeatDelay:25, delay:45})
  tl.to(path, 3, {drawSVG:"0%"});
  planet2DrawTl.add(tl, i);
})

const cometDraw = document.querySelectorAll('#comet .drawPath');
const cometDrawTl = new TimelineMax({repeat: -1, yoyo: true, paused: true});
cometDraw.forEach((path, i) => {
  const tl = new TimelineMax({repeatDelay:10, delay:25})
  tl.to(path, 3, {drawSVG:"0%"});
  cometDrawTl.add(tl, i);
})

const moonFullDraw = document.querySelectorAll('#moon-full .drawPath');
const moonFullDrawTl = new TimelineMax({repeat: -1, yoyo: true, paused: true});
moonFullDraw.forEach((path, i) => {
  const tl = new TimelineMax({repeatDelay:30, delay:35})
  tl.to(path, 3, {drawSVG:"0%"});
  moonFullDrawTl.add(tl, i);
})
const galaxyDraw = document.querySelectorAll('#comet .drawPath');
const galaxyDrawTl = new TimelineMax({repeat: -1, yoyo: true, paused: true});
galaxyDraw.forEach((path, i) => {
  const tl = new TimelineMax({repeatDelay:35, delay:55})
  tl.to(path, 3, {drawSVG:"0%"});
  galaxyDrawTl.add(tl, i);
})
const moonCrescentDraw = document.querySelectorAll('#moon-crescent .drawPath');
const moonCrescentDrawTl = new TimelineMax({repeat: -1, yoyo: true, paused: true});
moonCrescentDraw.forEach((path, i) => {
  const tl = new TimelineMax({repeatDelay:22, delay:65})
  tl.to(path, 3, {drawSVG:"0%"});
  moonCrescentDrawTl.add(tl, i);
})
const constellationDraw = document.querySelectorAll('#constellation .drawPath');
const constellationDrawTl = new TimelineMax({repeat: -1, yoyo: true, paused: true});
constellationDraw.forEach((path, i) => {
  const tl = new TimelineMax({repeatDelay:28, delay:28})
  tl.to(path, 3, {drawSVG:"0%"});
  constellationDrawTl.add(tl, i);
})