$totalPoints: 100;
$height: 80px;
$thickness: 20; //Insert a number between 1 - 100

@mixin clippin() {
  $wireList:(0, 0);
  @for $i from 1 through $totalPoints {
    $wireList: append($wireList, ($i * 100)/$totalPoints);
    $wireList: append($wireList, random(100 - $thickness + 1));
  }
  
    @for $i from $totalPoints through 0 {
    $wireList: append($wireList, ($i * 100)/$totalPoints);
      $wireList: append($wireList, nth($wireList, ($i + 1) * 2) + random($thickness + 1));
  }
  $wireList: append($wireList, 0);
  $wireList: append($wireList, 0);
  $unitList: ();
  @for $i from 1 through (($totalPoints * 2) + 3) {
    $unitList: append($unitList, unquote("#{nth($wireList, ($i * 2) - 1)}% #{nth($wireList, ($i * 2))}%"),comma );
  }
    -webkit-clip-path: polygon($unitList);
    clip-path: polygon($unitList);
}


body, #wrapper {
  background-color: #222;
}

#wrapper {
  top: 25%;
  width: 100%;
  height:$height;
  position:absolute;
  box-sizing: border-box;
}

#demLights {
  background-color: green;
  width: 100%;
  height: 100%;
  //transition: clip-path 10s ease;
  @include clippin();
  -webkit-animation: datAnimation 10s linear infinite;
  animation: datAnimation 10s linear infinite; 
}

@-webkit-keyframes datAnimation {
  @for $j from 1 to 10 {
    #{$j * 10}% {
    background-color: rgb(
            random(60),
            max(random(180), 150),
            max(random(257), 150));
    @include clippin();
  }
  }
}

@keyframes datAnimation {
  @for $j from 1 to 10 {
    #{$j * 10}% {
    background-color: rgb(
            random(60),
            max(random(180), 150),
            max(random(257), 150));
    @include clippin();
  }
  }
}