.shape
  -(1..6).each do |i|
    .piece
      -(1..4).each do |j|
        .face.face--triangle
      .face.face--square

@import "compass/css3";

$a: 13em; // side of cube
$df: $a*sqrt(2); // diagonal of cube face
$dc: $a*sqrt(3); // diagonal of cube
$l: $dc/2; // lateral side of triangular face of pyramid
$axis: 'Y' 'Y' 'X';
$shades: dodgerblue royalblue cornflowerblue deepskyblue 
    lightskyblue lightseagreen darkturquoise cadetblue 
    lightblue teal skyblue aqua;
$matrix: 1  2  3  4, // lateral faces of 1st pyramid
         8 11  7  2, // lateral faces of 2nd pyramid
        12  6  9 11, 
         5  4 10  6,
         3  7  9 10, 
        12  8  1  5;
$cf: 1.01; // correction factor

@function asin($val, $e: pi()/7200) {
  /*
   * $val: the value for which we compute the arc sine;
   * $e: tolerated error; lower = better precision
   * 
   * the function returns the arc sine of $val
   * 
   * Examples: 
   * asin(.5) returns 29.97584deg (using default tolerated error)
   * asin(0, pi()/180) returns 0deg
   */
  
  $sum: 0; // the "infinite" sum we compute
  $sign: 1; // sign of angle
  $flag: 0; // 0 if angle in absolute value < 45deg, 1 otherwise
  $i: 0; // current index
  $c: 1;
  $j: 2*$i + 1;
  
  @if abs($val) > sin(45deg) {
    $flag: 1;
    $sign: $val/abs($val);
    $val: sqrt(1 - pow($val, 2));
  }
  
  $term: $c*pow($val, $j)/$j;
  
  @while abs($term) > $e {
    $sum: $sum + $term;
    
    $i: $i + 1;
    $c: $c*(2*$i - 1)/(2*$i);
    $j: 2*$i + 1;
    
    $term: $c*pow($val, $j)/$j;
  }
  
  $result: $sign*($flag*pi()/2 + pow(-1, $flag)*$sum);
  
  @return $result;
}

@function atan($val, $e: pi()/7200) {
  /*
   * $val: the value for which we compute the arc tangent
   * $e: tolerated error; lower = better precision
   * 
   * the function returns the arc tangent of $val
   * 
   * Examples: 
   * atan(1) returns ~45deg (using default tolerated error)
   * atan(0, pi()/180) returns 0deg
   */
  
  $val: $val/sqrt(1 + pow($val, 2));
  
  @return asin($val, $e);
}

$va: 2*atan(($a/2)/($df/2))*1rad; // top angle
$sa: pi()/2*1rad - $va; // skew angle
$sf: cos($sa/1rad); // scale factor
$da: pi()/4*1rad; // dihedral angle for pyramid

@mixin size-pos($w, $h: $w) {
  margin: -$h/2 (-$w/2);
  width: $w; height: $h;
}

body {
  overflow: hidden;
	margin: 0;
  height: 100vh;
  perspective: 50em;
  background: darkgrey;
}

.shape, .shape *, .shape *:before {
  position: absolute;
  top: 50%; left: 50%;
  transform-style: preserve-3d;
}

.shape {
  transform: rotate(15deg) rotateY(0deg);
  animation: rot 5.3s linear infinite;
}

@keyframes rot {
  to { transform: rotate(15deg) rotateY(360deg); }
}

@for $i from 0 to 6 {
  $b: (floor($i/4)*pow(-1, $i) + 
       (1 - floor($i/4))*$i)*pi()/2*1rad;
  $val: 'rotate#{nth($axis, ceil(($i + 1)/2))}(#{$b})';
  
  .piece:nth-child(#{$i + 1}) {
    animation: ani#{$i} 7.5s ease-in-out infinite alternate;
    
    .face--square {
      $c: blueviolet;
      opacity: .5;
      background: 
        linear-gradient(random(360)*1deg, 
          lighten($c, random(40)), darken($c, random(40)));
    }
    @for $j from 0 to 4 {
      .face--triangle:nth-child(#{$j + 1}):before {
        $c: nth($shades, nth(nth($matrix, $i + 1), $j + 1));
        background: linear-gradient(0deg, 
            darken($c, 15%), lighten($c, 15%));
      }
    }
  }
  
  @keyframes ani#{$i} {
    0%, 20% { transform: unquote($val) translateZ($a/2); }
    40% {
      transform: unquote($val) translateZ($a/2) translateZ($a);
    }
    60% {
      transform: 
        unquote($val) 
        translateZ($a/2) 
        translateZ($a) 
        rotateX(pi()*1rad);
    }
    80%, 100% {
      transform: 
        unquote($val) 
        translateZ($a/2) 
        translateZ($a) 
        rotateX(pi()*1rad) 
        translateZ($cf*$a);
    }
  }
}

.face {
  backface-visibility: hidden;
  &:before {
    @include size-pos($a);
    background: rgba(255, 0, 0, .1);
  }
}

.face--square {
  @include size-pos($a);
  background: rgba(0, 0, 155, .1);
}

.face--triangle {
  overflow: hidden;
  @include size-pos($dc/2);
  opacity: .5;
  @for $i from 0 to 4 {
    &:nth-child(#{$i + 1}) {
      transform:
        rotateX(pi()/2*1rad) 
        rotateY($i*pi()/2*1rad) // rotate around pyramid height
        translateZ($a/2) // move to side of base square
        rotateX(pi()/2*1rad - $da) // rotate to form pyramid
        rotate($va/2) // 2D shaping starts here
        skewY($sa) 
        scaleX($sf) 
        scale($cf);
      &:before {
        transform: 
          scaleX(1/$sf) 
          skewY(-$sa) 
          rotate(-$va/2) 
          translateY(-50%);
        content: '';
      }
    }
  }
}