a precess production

precess-input-1399064443.scss

html, body{
  height:100%;
  background:#222;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
}

$blockSize: 10px;

a{
  display:block;
  width:8 * $blockSize;
  height:9 * $blockSize;
  background:red;
  text-indent:-999em; 
  position:relative;
  &:after{
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:$blockSize;
    height:$blockSize;
    background:#fff;
    animation:move 2s linear infinite;
  }
  &:before{
    content:'';
    display:block;
    position:absolute;
    height:$blockSize;
    width:$blockSize;
    background:#FFFECE;
    box-shadow:0 $blockSize #2AFD9C,
               0 $blockSize * 2 #2AFD9C,
               0 $blockSize * 3 #2AFD9C,
       0 $blockSize * 4 #2AFD9C,
       0 $blockSize * 5 #2AFD9C,
       0 $blockSize * 6 #2AFD9C, 
               0 $blockSize * 7 #2AFD9C,
       0 blockSize;
  }
}

$blockSize: 10px;
@keyframes move { 
  0%{
    left:0;
    top: 0;
  }
  @for $i from 1 through 33 {
    
    $percent: percentage($i/ 33);
    #{$percent}{
      @if ($i == 1){
      }
      @if ($i < 9){
       top:$i * $blockSize;
       left:0;
      }
      @else if ($i < 16){
       top:8 * $blockSize;
       left:($i - 8) * $blockSize; 
      }
      @else if ($i < 22){ 
       $top: 23 - $i;
       top:$top * $blockSize;
       left:7 * $blockSize;
      }
      @else if ($i < 24){
       $left: 28 - $i;
       top:2 * $blockSize;
       left:$left * $blockSize; 
      } 
      @else if ($i < 25){
       $top: 25 - $i;
       top:$top * $blockSize;  
       left:5 * $blockSize; 
      } 
      @else if ($i < 26){
       top:1 * $blockSize;
       left:5 * $blockSize; 
      }
      @else if ($i < 27){
       top:1 * $blockSize; 
       left:6 * $blockSize; 
      }
      @else if ($i < 28){
       top:0 * $blockSize; 
       left:5 * $blockSize; 
      }
      @else if ($i < 33){
       top:0 * $blockSize;
       $left: 33 - $i;
       left:$left * $blockSize;  
      }
      
    }
  }

}

precess-output-1399064443.css

html, body {
  height: 100%;
  background: #222;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  display: block;
  width: 80px;
  height: 90px;
  background: red;
  text-indent: -999em;
  position: relative;
}
a:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: #fff;
  animation: move 2s linear infinite;
}
a:before {
  content: '';
  display: block;
  position: absolute;
  height: 10px;
  width: 10px;
  background: #FFFECE;
  box-shadow: 0 10px #2afd9c, 0 20px #2afd9c, 0 30px #2afd9c, 0 40px #2afd9c, 0 50px #2afd9c, 0 60px #2afd9c, 0 70px #2afd9c, 0 blockSize;
}

@keyframes move {
  0% {
    left: 0;
    top: 0;
  }

  3.0303% {
    top: 10px;
    left: 0;
  }

  6.06061% {
    top: 20px;
    left: 0;
  }

  9.09091% {
    top: 30px;
    left: 0;
  }

  12.12121% {
    top: 40px;
    left: 0;
  }

  15.15152% {
    top: 50px;
    left: 0;
  }

  18.18182% {
    top: 60px;
    left: 0;
  }

  21.21212% {
    top: 70px;
    left: 0;
  }

  24.24242% {
    top: 80px;
    left: 0;
  }

  27.27273% {
    top: 80px;
    left: 10px;
  }

  30.30303% {
    top: 80px;
    left: 20px;
  }

  33.33333% {
    top: 80px;
    left: 30px;
  }

  36.36364% {
    top: 80px;
    left: 40px;
  }

  39.39394% {
    top: 80px;
    left: 50px;
  }

  42.42424% {
    top: 80px;
    left: 60px;
  }

  45.45455% {
    top: 80px;
    left: 70px;
  }

  48.48485% {
    top: 70px;
    left: 70px;
  }

  51.51515% {
    top: 60px;
    left: 70px;
  }

  54.54545% {
    top: 50px;
    left: 70px;
  }

  57.57576% {
    top: 40px;
    left: 70px;
  }

  60.60606% {
    top: 30px;
    left: 70px;
  }

  63.63636% {
    top: 20px;
    left: 70px;
  }

  66.66667% {
    top: 20px;
    left: 60px;
  }

  69.69697% {
    top: 20px;
    left: 50px;
  }

  72.72727% {
    top: 10px;
    left: 50px;
  }

  75.75758% {
    top: 10px;
    left: 50px;
  }

  78.78788% {
    top: 10px;
    left: 60px;
  }

  81.81818% {
    top: 0px;
    left: 50px;
  }

  84.84848% {
    top: 0px;
    left: 50px;
  }

  87.87879% {
    top: 0px;
    left: 40px;
  }

  90.90909% {
    top: 0px;
    left: 30px;
  }

  93.93939% {
    top: 0px;
    left: 20px;
  }

  96.9697% {
    top: 0px;
    left: 10px;
  }
}