#lines-wrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.line-reveal {
  width: 120%;
  height: 3px;
  overflow: hidden;
  position: absolute;
}
.line-reveal.show .overlay {
  animation: wipe 3s ease;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.line-reveal .overlay {
  background: #051523;
  height: 10px;
  position: absolute;
  top: -5px;
  width: 100%;
  transform-origin: 100% 0;
}
.line-reveal .line {
  border: 2px solid white;
  backface-visibility: hidden;
}

#line-a {
  left: 0;
  top: 60%;
  transform-origin: 0 0;
  transform: rotate(-50deg);
}
#line-a .line {
  border-color: #3fc2d8;
}

#line-b {
  left: 0;
  bottom: 10%;
  transform-origin: 0 0;
  transform: rotate(-25deg);
}
#line-b .line {
  border-color: #3fc2d8;
}

#line-c {
  right: 10%;
  bottom: 0;
  transform-origin: 100% 0;
  transform: rotate(70deg);
}
#line-c .line {
  border-color: #3fc2d8;
}

#line-d {
  right: 10%;
  bottom: 0;
  transform-origin: 100% 0;
  transform: rotate(120deg);
}
#line-d .line {
  border-color: #3fc2d8;
}

@keyframes wipe {
  to {
    transform: scaleX(0);
  }
}