.triangle
  .ani
    .triangle
      .ani
        .triangle
          .ani
            .triangle
              .ani
                .triangle

@import "compass/css3";

$c: #ee5533 #bb2233 #77ff33 #44cc33 #2B1F28;
$n: length($c); // has to match number of nested triangles in DOM
$l: 20em;
$t: 4s;
$precision: 10;
$line-th: 1px;
$k: 1.6;

$n-edges: 3;
$angle: ($n-edges - 2)*180deg/$n-edges;
$central-angle: 360deg/$n-edges;
$skew-angle: 90deg - $angle;
$scale-factor: cos($skew-angle);
$radius-i: ($l/2)/tan($central-angle/2);

html {
  overflow: hidden;
  background: nth($c, $n);
  
  &:before {
    position: absolute;
    top: 50%; left: 50%;
    margin: -$k/2*$l;
    width: $k*$l; height: $k*$l;
    background: 
      linear-gradient(white 5%, transparent 5%, transparent 95%, white 95%) 0 0 / 1px 100%, 
      linear-gradient(white 5%, transparent 5%, transparent 95%, white 95%) 100% 0 / 1px 100%, 
      linear-gradient(90deg, white 5%, transparent 5%, transparent 95%, white 95%) 0 0 / 100% 1px, 
      linear-gradient(90deg, white 5%, transparent 5%, transparent 95%, white 95%) 0 100% / 100% 1px;
    background-repeat: no-repeat;
    content: '';
  }
}

.triangle {
  &, *, &:before {
    box-sizing: border-box;
    position: absolute;
    top: 50%; left: 50%;
  }
  
  &, &:before {
    margin: -$l/2;
    width: $l; height: $l;
  }
  
  overflow: hidden;
  border: solid $line-th currentColor;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: translateY($radius-i) 
             rotate($angle/2) skewY($skew-angle) scaleX($scale-factor);
	background-clip: content-box;
  color: white;
  
  &:before {
    border: solid $line-th transparent;
    border-bottom-color: currentColor;
    border-width: inherit;
    transform: scaleX(1/$scale-factor) skewY(-$skew-angle) rotate(-$angle/2) 
               translateY(-50%);
			background-clip: content-box;
    content: '';
  }
  
  @for $i from 1 through $n {
    $tmp-selector: if($i > 1, selector-nest($tmp-selector, &), &);
    
    @at-root {
      #{$tmp-selector} {
        @if $i > 1 {
          animation: fix-border-#{$i} $t/2 linear infinite alternate;
        }
        
        &:before { background-color: nth($c, $i); }
      }
      
      @if $i > 1 {
        @keyframes fix-border-#{$i} {
          to { border-width: pow(2, $i)*$line-th; }
        }
      }
    } 
  }
}

.ani {
  transform: scaleX(1/$scale-factor) skewY(-$skew-angle) rotate(-$angle/2) 
             translateY(-$radius-i) 
             rotate(0deg)
             scale(1);
  animation: ani $t linear infinite;
}

/* 
 * for a linear variation of the angle, the length of the edge won't variate linearly, 
 * which is why I cannot have just the start and end keyframes
 */
@keyframes ani {
  @for $i from 0 through $precision {
    #{$i*100%/$precision} {
      $curr-angle: $i*$central-angle/$precision;
      
      transform: scaleX(1/$scale-factor) skewY(-$skew-angle) rotate(-$angle/2) 
                 translateY(-$radius-i) 
                 rotate($curr-angle)
                 scale(1/cos($central-angle/2 - $curr-angle)/2);
    }
  }
}