ul
	- for (var i = 0; i < 5; i++)
		li
ul
	- for (var i = 0; i < 128; i++)
		li

$elements:128;
$layers:7;
body {
	background:#323133;
	ul {
		padding:0;
		li {
			list-style:none;
		}
	}
	ul:nth-child(1) {
		position: absolute;
		top:calc(20vh - 1.6rem);
		left:50%;
		width:1rem;
		height:1rem;
		border-radius:100%;
		//background:#FFCE54;
		transform:translate(-50%, -50%);
		li {
			position: absolute;
			width:0;
			height:0;
			border-width:0 0.5rem 1rem 0.5rem;
			border-style:solid;
			border-color:transparent;
			border-bottom-color:#FFCE54;
			transform-origin:0.5rem 1rem;
			@for $i from 0 through 4 {
				&:nth-child(#{$i}) {
					transform:rotate($i*72deg);
				}
			}
		}
	}
	ul:nth-child(2) {
		padding:0;
		li {
			position: absolute;
			top:20vh;
			right:50%;
			width:0.0625rem;
			background: linear-gradient(rgba(46,204,113, 0), rgba(46,204,113, 0.25));
			list-style:none;
			transform-origin:50% 0;
			animation: swing 4s ease-in-out infinite;
			
			@for $i from 1 through $elements {
				&:nth-child(#{$i}) {
					height:60vh*(($i+4)/($elements+4)); 
						//Create gaps with the +4, remove +4 to stack up layers - effectively 4 invisible dots at the top
					animation-delay:-4s*($i/($elements/$layers));
				}
			}
			&:before {
				content: '';
				position: absolute;
				left:-1px;
				bottom:1px;
				width:3px;
				height:3px;
			}
			
			&:nth-child(4n):before {
				background:#D8334A;
			} 
			&:nth-child(4n+1):before {
				background:#FFCE54;
			} 
			&:nth-child(4n+2):before {
				background:#2ECC71;
			} 
			&:nth-child(4n+3):before {
				background:#5D9CEC;
			} 
		}
	}
}

@keyframes swing {
	0%, 100% {
		transform:rotate(-30deg);
	}
	5%, 45% {
		opacity:0.25;
	}
	50%, 100%, 0% {
		opacity:1;
	}
	50% {
		transform:rotate(30deg);
	}
}