- let n = 5;
- let m = n*n;

mixin unit()
	- let c = Math.round(Math.random());
	- let tr, dt, to;
	- if(c) {
		- tr = +(5 + 3*Math.random()).toFixed(2);
		- dt = +(-tr*Math.random()).toFixed(2);
		- to = +(1 + Math.random()).toFixed(2);
		- cx = +(.25 + .75*Math.random()).toFixed(2);
	- }
	.unit(class=c ? 'anim' : null 
				style=c ? `--tr: ${tr}s; --to: ${to}s; --dt: ${dt}s; --cx: ${cx}` : null)
		- if(c)
			.cube.shdw
				.half
				.half
		.gate.shdw
			.inner.later
				- for(let i = 0; i < 3; i++)
					.side
			.front
			.outer.later

style
	- for(let i = 0; i < n; i++)
		| .unit:nth-child(#{n}n + #{i + 1}) { --i: #{i} }
		| .unit:nth-child(n + #{n*i + 1}) { --j: #{i} }
	- for(let i = 0; i < 3; i++)
		| .side:nth-child(#{i + 1}) { --idx: #{i} }
.a3d(style=`--n: ${n}`)
	- for(let i = 0; i < m; i++)
		+unit()
View Compiled
$gate-l: 6em;
$gate-w: .25*$gate-l;
$gate-g: 1.5*$gate-l;
$gate-o: .5*($gate-w + $gate-l);
$gate-a: .35;
$gate-b: .75;
$gate-z: $gate-g + $gate-l;

$cube-l: $gate-l/3;
$cube-r: .5*$cube-l;
$cube-p: 35%;
$cube-z: 1.5*$cube-l;

%oppose {
	transform: 
		rotate3d(var(--vi), var(--vj), 0, calc(var(--s)*.5turn)) 
		translatez(var(--z, #{$cube-r}))
}

%shaded {
	--int: Max(0, calc(var(--sum) - .5));
	--mod: calc(var(--sum) - var(--int));
	--abs: Max(calc(.5 - var(--mod)), calc(var(--mod) - .5));
	--k: calc(1 - 2*var(--abs));
	color: hsl(200, var(--sat, 75%), calc(63% - var(--k, -.1)*50%));
	background: currentcolor;
}

@property --d {
	syntax: '<length>';
	initial-value: 0px;
	inherits: true
}

@property --p {
	syntax: '<number>';
	initial-value: 0;
	inherits: true
}

@property --int {
	syntax: '<integer>';
	initial-value: 0;
	inherits: true
}

@property --f {
	syntax: '<number>';
	initial-value: 0;
	inherits: true
}

body, div { display: grid }

body {
	overflow: hidden;
	margin: 0;
	height: 100vh;
	background: #319eea;
	
	&:before, &:after {
		--o: calc(var(--s)*-100%);
		position: absolute;
		z-index: -1;
		top: calc(var(--s)*100%);
		left: calc(var(--s)*100%);
		padding: 0 .5em;
		transform: translate(var(--o), var(--o));
		opacity: .05;
		color: #fff;
		font: italic 900 4vmin/ 2 petit formal script;
		white-space: nowrap;
		text-align: center
	}
	
	&:after { content: 'Missing you every day' }
	
	&:before { content: '1st of June 1927 - 18th of January 2019' }
}

div {
	--vi: 0;
	--vj: calc(1 - var(--vi));
	transform-style: preserve-3d
}

div, ::before, ::after { grid-area: 1/ 1 }

.side, ::before, ::after {
	--not-s: calc(1 - var(--s));
	--sgn-s: calc(2*var(--s) - 1);
	backface-visibility: hidden
}

.side:nth-child(1), ::before { --s: 0 }
.side:nth-child(3), ::after { --s: 1 }

.a3d {
	grid-gap: $gate-g;
	grid-template: #{$gate-l}/ repeat(var(--n), $gate-l);
	place-self: center;
	transform: rotatex(-35deg) rotatey(45deg)
}

.unit {
	--f: .5;
	--m: calc(.5*(var(--n) - 1));
	grid-area: 1/ calc(var(--i) + 1);
	transform: 
		translatez(calc((var(--j) - var(--m))*#{$gate-z})) 
		rotatey(calc(var(--p, 0)*1turn));
}

.anim {
	animation: 
		p var(--tr) 
		cubic-bezier(var(--cx), calc(-1*var(--cx)), 
								 calc(1 - var(--cx)), calc(1 + var(--cx))) 
		var(--dt) infinite alternate, 
		osc var(--to) ease-in-out infinite alternate
}

@keyframes p {
	0%, 25% { --p: 0 }
	75%, 100% { --p: .5 }
}

@keyframes osc {
	0%, #{$cube-p} { --d: #{-$cube-z} }
	#{100% - $cube-p}, 100% { --d: #{$cube-z} }
}

.shdw {
	&::before {
		transform: 
			translatey($gate-o) 
			rotatex(90deg);
		background: radial-gradient(rgba(#000, .5), transparent);
		filter: blur(9px);
		content: ''
	}
}

.cube {
	--vi: 1;
	--sat: 62%;
	place-self: center;
	width: $cube-l; height: $cube-l;
	transform: translatez(var(--d));
	
	&::after {
		--s: .5;
		@extend %oppose;
		@extend %shaded;
		content: ''
	}
}

.half {
	--dir: 0;
	transform: rotatey(calc(var(--dir)*90deg));
	
	&:nth-child(2) { --dir: 1 }
	
	&::before, &::after {
		--sum: calc(var(--p) + .5*var(--s) + .25*var(--dir) + 1);
		@extend %oppose;
		@extend %shaded;
		content: ''
	}
}

.gate {
	animation: 
		f calc(.5*var(--to)) ease-in-out infinite alternate;
	
	&::before {
		align-self: center;
		height: $gate-w
	}
}

@keyframes f {
	0%, #{$cube-p} { --f: .35 }
	100% { --f: .75 }
}

.later {
	--lat-w: #{$gate-l};
	--sgn-e: calc(2*var(--e) - 1);
	@extend %shaded;
	grid-auto-flow: column;
	justify-content: center;
	place-self: center;
	width: var(--lat-w); height: $gate-w;
	transform: 
		translatey(calc(-.5*var(--sgn-e)*var(--lat-w))) 
		rotatex(90deg);
	
	.side, &::before, &::after {
		--sum: calc(var(--p) + .25 + .5*(var(--e) - var(--sgn-e)*var(--s)) + 1);
		@extend %shaded;
		grid-area: initial;
		width: inherit;
		transform-origin: calc(var(--not-s)*100%);
		transform: 
			rotatey(calc(var(--sgn-s)*var(--sgn-e)*90deg));
	}
}

.outer {
	--e: 1;
	grid-gap: $gate-l;
	
	&::before, &::after { content: '' }
}

.front {
	&::before, &::after {
		--z: #{.5*$gate-w};
		--sum: calc(var(--p) + var(--s)*.5 + 1);
		@extend %oppose;
		@extend %shaded;
		border: solid calc(.5*(1 - var(--f))*#{$gate-l}) currentcolor;
		background: transparent;
		content: ''
	}
}

.inner {
	--e: 0;
	--lat-w: calc(var(--f)*#{$gate-l})
}

.side {
	--sum: calc(var(--p) + .25 + .5*var(--s) + 1);
	
	.anim & {
		&:nth-child(2) {
			overflow: hidden;
			
			&::after {
				place-self: center;
				width: $cube-l; height: $cube-l;
				transform: translatey(var(--d));
				background: radial-gradient(#000, transparent);
				filter: blur(9px);
				content: ''
			}
		}
		
		&::before {
			margin: 3px 0;
			background: 
				linear-gradient(45deg, hotpink 15%, gainsboro, gold 85%);
			animation: 
				glow calc(.5*var(--to)) ease-out infinite alternate;
			content: ''
		}
	}
}

@keyframes glow {
	0%, #{$cube-p} { opacity: 0 }
	#{2*$cube-p}, 100% { --f: .75 }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.