.frame
  - (1..100).each do |i|
    .line

$colors: (#60479b, #34acbb, #abc1af, #f1367b);
$max-lines: 4;
$max-translate: 60;

body {
  background: #d0c6ce;
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
	width: 56vh;
  height: 80vh;
  overflow: hidden;
  background: linear-gradient(to right, $colors);
  background-position: center;
  background-size: 120%;
  transform: translate(-50%, -50%);
  box-shadow: -4vh 4vh 5px rgba(#b9807c, .4);
}

.line {
  width: 100%;
  height: 1%;
  background: linear-gradient(to right, $colors);
  
  $i: 1;
  @while $i <= 100 {
    $lines: random($max-lines);
    $move: random($max-translate * 2) - $max-translate;
    
    &:nth-child(n+#{$i}):nth-child(-n+#{$i+$lines}) {
      transform: translateX($move * 1px);
    }
  
  	$i: $i + $lines;
  }
}

// Inspired by the work of Manuel Fernandez
// http://picdit.net/2014/07/12/manuel-fernandez/