-max = 200
%div.wrap
  -max.times do
    %div.tri

$total: 200;
$time: 10s;

html, body, .wrap {
	height: 100%;
}

body {
	background: black;
	background-image: radial-gradient(circle at center, white 0%, #222 10%, black 60%);
	overflow: hidden;
}

.wrap {
	transform-style: preserve-3d;
	perspective: 800px;
}

.tri {
	height: 0;
	width: 0;
	position: absolute;
	top: 50%;
	left: 50%;
}

@for $i from 1 through $total {
	$size: random(50) * 1px;
	$rotate: random(360) * 1deg;
	.tri:nth-child(#{$i}){
		border-top: $size solid hsla(random(360), 100%, 50%, 1);
		border-right: $size solid transparent;
		border-left: $size solid transparent;
		margin-left: -$size/2;
		margin-top: -$size/2;
		-webkit-filter: grayscale(1);
		filter: grayscale(1);
		transform: rotate($rotate) translate3d(0,0,-1500px) scale(0);
		animation: anim#{$i} $time infinite linear;
		animation-delay: $i * -($time/$total);
		opacity: 0;
	}
	
	@keyframes anim#{$i}{
		0% {
			opacity: 1;
			transform: rotate($rotate * 1.5) translate3d(random(1000) * 1px, random(1000) * 1px,1000px) scale(1);
		}
	}
}