$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; }
    }
}