``````.shape
-(1..2).each do |i|
%ul.pyramid
-(1..13).each do |i|
%li.face``````
``````\$sides: 4;
\$layers: 3;
\$l: 12.5em;

\$h: \$l;

@function hypotenuse(\$c1, \$c2: \$c1) {
\$unit: unit(\$c1);
@if \$c1 != \$c2 and unit(\$c1) != unit(\$c2) {
@return 'error, different units';
}
\$uc1: \$c1/(\$c1*0 + 1); // unitless value
\$uc2: \$c2/(\$c2*0 + 1); // unitless value
@return sqrt(pow(\$uc1, 2) + pow(\$uc2, 2))*(\$c1/\$uc1);
}

}

@return \$deg*pi()/180;
}

@function asind(\$val, \$precision: 25) {
\$coeff: 1;
\$sum: \$coeff*\$val;
@for \$i from 1 through \$precision {
\$coeff: \$coeff*(2*\$i - 1)/(2*\$i);
\$sum: \$sum + \$coeff*pow(\$val, 2*\$i + 1)/(2*\$i + 1);
}
@return deg(\$sum);
}

// Can I simplify this part?
\$d: 3*\$l/8 \$l/4 \$l/2;
\$hf: hypotenuse(\$h, nth(\$d, 1))
hypotenuse(\$h, nth(\$d, 2))
hypotenuse(\$h, nth(\$d, 3));
\$rax: asind(nth(\$d, 1)/nth(\$hf, 1))
asind(nth(\$d, 2)/nth(\$hf, 2))
asind(nth(\$d, 3)/nth(\$hf, 3));
\$side: hypotenuse(nth(\$hf, 1), \$l/4)
hypotenuse(nth(\$hf, 2), \$l/2)
hypotenuse(nth(\$hf, 3), \$l/2);
\$av: 2*asind((\$l/4)/nth(\$side, 1))
2*asind((\$l/2)/nth(\$side, 2))
2*asind((\$l/2)/nth(\$side, 3));
\$inside: 0
hypotenuse(nth(\$hf, 2), nth(\$d, 1))
hypotenuse(nth(\$hf, 3), nth(\$d, 2));
\$sa: 0
asind(nth(\$d, 1)/nth(\$inside, 2))
asind(nth(\$d, 2)/nth(\$inside, 3));
\$tx: 0
.92*nth(\$side, 2)*(1 - nth(\$d, 1)/nth(\$inside, 2))/2 + nth(\$d, 1)
.98*nth(\$side, 3)*(1 - nth(\$d, 2)/nth(\$inside, 3))/2 + nth(\$d, 2);
\$basec: #38525a;

* { margin: 0; transform-style: preserve-3d; }

html {
overflow: hidden;
height: 100%;
perspective: 20em;
background: dimgrey;
color: darken(\$basec, 20%);
&:before {
position: absolute;
top: -75%; right: -95%; bottom: -120%; left: -95%;
transform: translateZ(-\$l) rotateX(-30deg);
background:
transparent 49%, #b8b6ad 49%,
#b8b6ad 51%, transparent 51%),
transparent 49%, #b8b6ad 49%,
#b8b6ad 51%, transparent 51%),
background-size: \$l/4.5 \$l/8, \$l/4.5 \$l/8, 100% 100%;
content: '';
}
&:after {
position: absolute;
top: 56%; right: 0; bottom: 0; left: 0;
white, rgba(255, 255, 255, 0))
no-repeat;
content: '';
}
}
body {
height: 100%;
&:before {
position: absolute;
z-index: -1;
bottom: 56%; left: 53%;
width: .25em; height: .25em;
transform: translateZ(\$l/sqrt(2));
box-shadow: 0 0 \$l/2 \$l/4 lemonchiffon;
background: rgba(white, .8);
animation: pulse 1s ease-in-out infinite alternate;
content: '';
}
}
@keyframes pulse { to { box-shadow: 0 0 \$l \$l/2 white; } }
.shape, .shape *, .shape *:before, .shape *:after {
position: absolute;
top: 50%; left: 50%;
transform-style: preserve-3d;
backface-visibility: hidden;
opacity: 1;
}
.shape {
height: \$l;
list-style: none;
transform: translateY(-\$l) rotateY(40deg);
animation: shiftall 1s ease-in-out infinite alternate;
}
@keyframes shiftall {
to { transform: translateY(-7*\$l/8) rotateY(40deg); }
}
.pyramid {
&:last-child {
transform: translateY(\$l/16) scaleY(-1);
animation: shiftlow 1s ease-in-out infinite alternate;
}
}
.face {
overflow: hidden;
z-index: -1;
@for \$i from 0 to \$layers*\$sides {
&:nth-child(#{\$i + 1}) {
\$idx: \$i%\$layers + 1;
\$cd: nth(\$d, \$idx);
\$cside: nth(\$side, \$idx);
\$crax: nth(\$rax, \$idx);
\$cav: nth(\$av, \$idx);
\$csa: nth(\$sa, \$idx);
\$ctx: nth(\$tx, \$idx);
margin: -\$cside/2;
width: \$cside; height: \$cside;
transform: rotateY(#{(floor(\$i/\$layers)%4)*90}deg)
translateZ(\$cd)
rotateY(#{(\$i%\$layers)%2*180}deg)
rotateX(#{pow(-1, (\$i%\$layers)%2)*\$crax}deg)
rotate(#{90 - \$cav/2}deg)
skewX(#{90 - \$cav}deg) scaleY(sin(rad(\$cav)));
&:before, &:after {
background: lighten(\$basec, \$idx*5%);
}
&:before {
skewX(#{\$cav - 90}deg)
rotate(#{\$cav/2 - 90}deg)
translate(-\$ctx, -\$cside/2)
skewX(#{-\$csa}deg);
}
&:after {
skewX(#{\$cav - 90}deg)
rotate(#{\$cav/2 - 90}deg)
translate(\$ctx, -\$cside/2)
skewX(#{\$csa}deg);
}
}
}
&:last-child {
\$sh: ();
overflow: visible;
z-index: 1;
margin: -3*\$l/8;
width: 3*\$l/4; height: 3*\$l/4;
transform: rotateX(-90deg);
@for \$i from 0 to 4 {
\$sh: \$sh,
pow(-1, floor(\$i/2))*3*\$l/8 pow(-1, \$i)*3*\$l/8
0 (-\$l/4) \$basec;
}
background: \$basec;
&:after {
top: 0%; left: 0%;
margin: -\$l/8;
width: \$l/4; height: \$l/4;
background: \$basec;
content: '';
}
}
&:before, &:after {
margin: inherit;
width: inherit; height: inherit;
content: '';
}
}
@keyframes shiftlow {
to { transform: translateY(\$l/8) scaleY(-1); }
}``````

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.