` ````
- var n4hedron = 4;
.s4hedron(style=`--n: ${n4hedron}`)
while n4hedron--
.s4hedron__face(style=`--i: ${n4hedron%2}; --j: ${~~(n4hedron/2)}`)
```

` ````
@import 'compass/css3';
$t: 5s;
@function getPolyPoints(
$n: 3 /* number of poly vertices */,
$oa: -90deg /* angular offset of 1st poly vertex */) {
$ba: 360deg/$n; // base angle corrensponding to 1 poly edge
$pl: (); // list of points, initially empty
@for $i from 0 to $n {
$ca: $i*$ba + $oa; // angle current point is at wrt x axis
$x: 50%*(1 + cos($ca)); // x coord of current point
$y: 50%*(1 + sin($ca)); // y coord of current point
$pl: $pl, $x $y // add current point coords to points list
}
@return $pl
}
@function use($map, $key, $default) {
@return if(map-has-key($map, $key), map-get($map, $key), $default)
}
@mixin s4hedron($l, $bg, $ani: false, $shadow: false) {
$n3gon: 3; // number of vertices of triangular tetrahedron faces
$ba3gon: 360deg/$n3gon; // base angle corresponding to equilateral triangle edge
$rc3gon: .5*$l/sin(.5*$ba3gon); // circumradius of equilateral triangle of edge $l
$ri3gon: .5*$l/tan(.5*$ba3gon); // inradius of equilateral triangle of edge $l
$h3gon: $rc3gon + $ri3gon; // height of equilateral triangle of edge $l
$l6hedron: $l/sqrt(2); // edge of cube tetrahedron is formed on, its edges being cube face diagonals
$rax4hedron: atan(.5*$l/$l6hedron)*180deg/pi(); // x rotation angle for tetrahedron faces
$ri4hedron: $rc3gon*tan(asin($ri3gon/$h3gon)*180deg/pi()); // inradius of tetrahedron
position: absolute;
top: 50%; left: 50%;
transform-style: preserve-3d;
animation: rot $t linear calc((var(--p) - 1)*#{$t}) infinite;
animation-play-state: if($ani, null, paused);
@if $shadow {
&:before {
position: absolute;
margin: -1px;
padding: 1px;
transform:
translatey(calc(#{.5*$l6hedron} + #{use($shadow, dy, 0px)}))
rotatex(90deg) rotate(45deg);
box-shadow: 0 0 .25*$rc3gon .575*$rc3gon currentcolor;
background: currentcolor;
color: use($shadow, c, silver);
content: ''
}
}
&__face {
--k: calc(var(--j) + 2*var(--i));
position: absolute;
margin: -$rc3gon;
padding: $rc3gon;
transform: rotate(calc(var(--j)*.5turn))
rotatey(calc(var(--k)*.25turn))
rotatex(-$rax4hedron)
translatez($ri4hedron);
background: $bg;
filter: brightness(calc(1 + var(--j)*.1));
--shape: polygon(getPolyPoints());
-webkit-clip-path: var(--shape);
clip-path: var(--shape);
animation: shade .5*$t ease-in-out calc((var(--p) - var(--k)/var(--n))*#{$t}) infinite alternate;
animation-play-state: inherit
}
@keyframes rot { 0% { transform: rotatey(1turn) } }
@keyframes shade { to { filter: brightness(calc(.5 + var(--j)*.1)) } }
}
body {
--p: .45;
overflow: hidden;
height: 100vh;
perspective: 25em;
background:gainsboro
}
.s4hedron { @include s4hedron(35vmin, #db533d, true, (dy: 2em)) }
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers