$x: 15;
$y: 7;
$s: 3em; 
$d: 6s;
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.box {
  position: relative;
  height: $y * $s;
  width: $x * $s;
  &:after {
    content: '';
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
    height: inherit;
    width: inherit;
    background-image: linear-gradient(to top, black 1px, transparent 2px), linear-gradient(to left, black 1px, transparent 2px);
    background-size: $s $s;
    background-repeat: repeat;
    border-top: 1px solid black;
    border-left: 1px solid black;
  }
}
.shape {
  position: absolute;
  top: 0;
  left: 0;
  &.t1 {
    transform: translate3d($s*6,
    $s,
    0);
    border: {
      color: transparent #f00 #f00 transparent;
      style: solid;
      width: $s*3 $s*8 0 0;
    }
    animation: t1 $d linear infinite;
  }
  &.t2 {
    transform: translate3d($s,
    $s*4,
    0);
    border: {
      color: transparent #0f0 #0f0 transparent;
      style: solid;
      width: $s*2 $s*5 0 0;
    }
    animation: t2 $d linear infinite;
  }
  &.l {
    height: $s;
    &:before {
      position: absolute;
      display: block;
      content: '';
      height: $s;
      background: inherit;
    }
  }
  &.l1 {
    transform: translate3d($s*9,
    $s*5,
    0);
    background: #00f;
    width: $s*5;
    &:before {
      width: $s*3;
      bottom: 100%;
      right: 0;
    }
  }
  &.l2 {
    transform: translate3d($s*6,
    $s*4,
    0);
    background: #da0;
    width: $s*5;
    animation: l2 $d linear infinite;
    &:before {
      width: $s*2;
      top: 100%;
      left: 0;
    }
  }
}
@keyframes t1 {
  80% {
    transform: translate3d($s*6, $s, 0);
  }
  20%,
  40% {
    transform: translate3d($s, $s*3, 0);
  }
}
@keyframes t2 {
  80% {
    transform: translate3d($s, $s*4, 0);
  }
  20%,
  40% {
    transform: translate3d($s*9, $s, 0);
  }
}
@keyframes l2 {
  80% {
    transform: translate3d($s*6, $s*4, 0);
  }
  20%,
  40% {
    transform: translate3d($s*9, $s*3, 0);
  }
}