- var n_hex = 6, n_cols = 32;

mixin poly(n, r)
	- var n = Math.max(3, Math.round(n)) || 3;
	- var r = r || 2000; //- circumradius
	- var d = 2*r; //- diameter, SVG size
	- var ba = 2*Math.PI/n; //- base angle
	- var v = []; //- store vertex coords in it
	- for(var i = 0; i < n; i++) {
		- var ca = i*ba; //- current angle
		//- compute current vertex coords
		- var x = r*Math.cos(ca);
		- var y = r*Math.sin(ca);
		//- add them to array of vertex coords
		- v.push([x, y]);
	- }
	clipPath(id='cp#{n}')
		polygon(id='p#{n}' points=v.join(' '))
	symbol(viewBox=[-r, -r, d, d].join(' ') 
				 id='s#{n}')
		use(xlink:href='#p#{n}' 
				clip-path='url(#cp#{n})')


input#sh(type='checkbox')
label(for='sh') add shadows (can make Blink browsers laggy, breaks Edge)

svg(width='0' height='0')
	+poly(n_hex)

.helix
	while n_cols--
		- var n_tiles = 8;
		.col
			while n_tiles--
				.tile
					svg
						use(xlink:href='#s#{n_hex}')
View Compiled
$ncols: 32; // same as in Jade, no of columns
$ntiles: 8; // same as in Jade, tiles on col
$t: 8s;
$sh: drop-shadow(1px 1px 1px #000);
$dc6gon: 2em; // diam of circumcircle
$off: 1.375*$dc6gon;
$check-d: 1.25em;
$ctrl-ll: silver;
$ctrl-hl: cyan;

@function rt($min: 0s) {
	@return $min + .01*random(100)*$t;
}

body {
	overflow: hidden;
	margin: 0;
	height: 100vh;
	perspective: 80em;
	background: radial-gradient(#19f, #01a);
	color: #1b7ef5;
}

polygon {
	fill: currentColor;
	stroke: #fff;
	stroke-width: 3px;
	vector-effect: non-scaling-stroke;
}

div {
	position: absolute;
	transform-style: preserve-3d;
}

.helix { top: 50%; left: 50%; }

.col {
	animation: rx $t linear infinite;
	
	@for $i from 0 to $ncols {
		&:nth-child(#{$i + 1}) {
			left: ($i - .5*($ncols - 1))*$off;
			animation-delay: -$i*$t/$ncols;
			
			use { animation-delay: -1*rt(); }
		}
	}
}

@keyframes rx {
	to { transform: rotateX(1turn); }
}

.tile {
	animation: inherit;
	animation-direction: reverse;
	
	[id='sh']:checked ~ .helix & {
		-webkit-filter: $sh;
						filter: $sh;
	}
	
	@for $i from 0 to $ntiles {
		&:nth-child(#{$i + 1}) {
			top: ($i - .5*($ntiles - 1))*$off;
			
			use { animation-duration: rt(.5s); }
		}
	}
	
	> svg {
		margin: -.5*$dc6gon;
		width: $dc6gon; height: $dc6gon;
		animation: inherit;
		animation-name: rz;
	}
	
	use {
		animation: c 0s ease-in-out infinite alternate;
	}
}

@keyframes rz {
	to { transform: rotate(1turn); }
}

@keyframes c { to { color: #18fefb; } }

[type='checkbox'] {
	position: absolute;
	left: -100vw;
	
	+ label {
		position: absolute;
		z-index: 2;
		border: solid 0 transparent;
		border-width: .125em 1em .25em;
		color: $ctrl-ll;
		font: 1.25em/2 trebuchet ms, verdana, 
			arial, sans-serif;
		text-align: left;
		cursor: pointer;
		
		&:before {
			box-sizing: border-box;
			display: inline-block;
			position: relative;
			top: 50%; left: 0;
			margin: -$check-d/2 $check-d/4;
			border: solid .125em $ctrl-ll;
			padding: .25em;
			width: $check-d; height: $check-d;
			color: transparent;
			font: 900 1em/.5 sans-serif;
			text-indent: -.125em;
			transition: .3s ease-out;
			content: '✓';
		}
	}
	
	&:focus + label {
		outline: none;
		
		&:before { border-color: $ctrl-hl; }
	}
	
	&:checked + label {
		&, &:before { color: $ctrl-hl; }
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.