.wrap
	- 100.times do
		.circle

$total: 100;

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

body {
	background: #000;
	overflow: hidden;
}

.wrap {
	position: relative;
	perspective: 1000px;
}

.circle {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100px;
	width: 100px;
	margin-left: -50px;
	margin-top: -50px;
	opacity: .5;

	@for $i from 1 through $total {
		$deg: $i * 10deg;
		
		&:nth-child(#{$i}){
			$hue: $i * 3;
			transform: rotate($deg) translateY(100px) rotate(0);
			animation: spin#{$i} 10s infinite ease-in-out alternate;
			border-color: hsla($hue, 100%, 50%, 1);
			box-shadow: 0 0 50px hsla($hue, 100%, 50%, 1);
		}
		
		@keyframes spin#{$i} {
			100% {
				transform: rotate(360 + $deg)  translateY(100px) rotate($deg * 4);
			}
		}
	}
}