``````.assembly.assembly--2d
- 6.times do
.positioner
.triangle

.assembly.assembly--3d
.cube
- 6.times do
.cube__face``````
``````@import 'compass/css3';

// fixed & fixed computed values
\$n-2d: 6; // same as in DOM
\$n-3d: 6; // same as in DOM
\$n-tri: 3; // nuber of vertices in triangle
\$base-angle-tri: 360deg/\$n-tri;
\$angle-tri: 180deg/\$n-tri;
\$skew-angle: 90deg - \$angle-tri;
\$s-factor: cos(\$skew-angle);
\$rot-angle: -.5*\$angle-tri;
\$base-angle-2d: 360deg/\$n-2d;

// variable values, can tweak these
\$l: 5em;
\$base-c: #184460; // clumsy picker value
\$base-perc: 2.5%;
\$light-factor: 10%;
// from easings.net
\$easeInOutCubic: cubic-bezier(.65,.05,.35,1);

// computed values, from fixed & variable
\$height-tri: \$l*sin(\$angle-tri);
\$delim-c: lighten(\$base-c, 30%);
\$diag-face: sqrt(pow(\$l, 2) + pow(\$l, 2));
\$diag-cube: sqrt(pow(\$diag-face, 2) + pow(\$l, 2));
\$scale-3d: \$diag-cube/\$diag-face;
\$l-3d: \$scale-3d*\$l;
// inverse trig func - see http://thesassway.com/advanced/inverse-trigonometric-functions-with-sass
\$rx-3d: acos(\$diag-face/\$diag-cube);

@mixin blur(\$f: .25*\$l) {
-webkit-filter: blur(\$f);
filter: blur(\$f);
}

@mixin glow(\$c: \$delim-c) {
}

html, body { height: 100%; }

body {
overflow: hidden;
margin: 0;
background: #000;

* { // pos everyhing absolutely in the middle
position: absolute;
top: 50%; left: 50%;
animation: inherit;
}
}

.assembly {
animation: vis-2d 4s steps(1, end) infinite;

&--3d {
&, * { transform-style: preserve-3d; }

animation-name: vis-3d;
transform: rotateX(-\$rx-3d) rotateY(-45deg);
}
}

@keyframes vis-2d {
0%, 60%, 100% { opacity: .999; }
40% { opacity: .001; }
}

@keyframes vis-3d {
0%, 60%, 100% { opacity: .001; }
40% { opacity: .999; }
}

.positioner {
animation-timing-function: \$easeInOutCubic;

@for \$i from 0 to \$n-2d {
\$j: floor(\$i/2);
\$curr-angle: (\$i - 1)*\$base-angle-2d;
\$curr-perc: (\$i + 1)*\$base-perc;
\$curr-c: darken(lighten(\$base-c, random(20)), random(20));
\$group-c: lighten(\$base-c, \$j*\$light-factor);

&:nth-child(#{\$i + 1}) {
animation-name: pos#{\$i + 1};

.triangle { animation-name: paint#{\$i + 1};	}
}

@at-root {
@keyframes pos#{\$i + 1} {
0%, #{\$curr-perc},
#{80% + \$curr-perc}, 100% {
transform: rotate(\$curr-angle)
translate(-\$l);
opacity: .001;
@include blur();
animation-timing-function:
cubic-bezier(.215,.61,.355,1);
}
20%, 80% {
transform: rotate(\$curr-angle);
opacity: .999;
@include blur(0);
}
}

@keyframes paint#{\$i + 1} {
20%, 80% { color: \$curr-c; }
30%, 70% { @include glow(\$curr-c); }
40%, 60% {
color: \$group-c;
@include glow(\$group-c);
}
}
}
}
}

.triangle {
margin: -.5*\$l;
width: \$l; height: \$l;
transform: translate(-\$height-tri)
rotate(\$rot-angle)
skewX(\$skew-angle) scaleY(\$s-factor);
currentColor 50%, transparent 50%);
color: \$base-c;
@include glow();
}

.cube {
animation-name: rot;
animation-timing-function: \$easeInOutCubic;

&__face {
margin: -.5*\$l-3d;
width: \$l-3d; height: \$l-3d;
background: currentColor;
color: \$base-c;
animation: none;

&:nth-child(even) {
color: lighten(\$base-c, 2*\$light-factor);
}

&:nth-child(n + 5) {
color: lighten(\$base-c, \$light-factor);
}

@for \$i from 0 to \$n-3d {
&:nth-child(#{\$i + 1}) {
transform: if(\$i < 4, rotateY(\$i*90deg), rotateX(pow(-1, \$i)*90deg))
translateZ(.5*\$l-3d);
}
}
}
}

@keyframes rot {
0%, 40% { transform: none; }
60%, 100% { transform: rotateY(.5turn); }
}``````

### External JavaScript

This Pen doesn't use any external JavaScript resources.