.ground
  .horizontal
    - for (var x = 1; x < 100; x++)
      .line
  .vertical
    - for (var x = 1; x < 100; x++)
      .line

$ground-size: 500px;
$lines: 15;
$line-color: #631FAA;
$line-color2: #631FAA;

body {
  background-color: #000000;
  perspective: 400px;
  height: 100vh;
  overflow: hidden;
}

.ground {
  width: 100%;
  height: 100%;
  transform: rotateX(70deg);
  
  .vertical, .horizontal {
    position: absolute;
    width: 100%;
    height: 200vh;
    top: 0;
  }
  
  .line {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .horizontal {
    @for $i from 1 through 1000 {
      .line:nth-child(#{$i}) {
        width: 100%;
        height: $ground-size / $lines;
        border-bottom: 1px solid $line-color;
        animation-name: move, changeColor;
        animation-duration: .5s, 3s;
        animation-delay: 0s, #{$i}s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      } 
    }  
  }
  .vertical {
    @for $i from 1 through 1000 {
      .line:nth-child(#{$i}) {
        height: 100%;
        width: $ground-size / $lines;
        border-right: 1px solid $line-color;
        display: inline-block;
        animation-name: changeColor;
        animation-duration: 3s;
        animation-delay: #{$i}s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      } 
    }  
  }
  
}

@keyframes move {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY($ground-size / $lines);
  }
}

@keyframes changeColor {
  0% {border-color: $line-color}
  50% {border-color: $line-color2}
  100% {border-color: $line-color}
}