body {
	text-align: center;
	overflow: hidden;
	background: radial-gradient(#001040, #000000);
	display: flex;
	justify-content: center;
	align-items: center;
	width:  100vw;
	height: 100vh;
}

svg {
	position: absolute;

	bottom: 48px;
	right: 72px;

	animation-duration: 3s;
	animation-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
	animation-iteration-count: infinite;
}

#p2  { animation-name: spin2 ; }
#p3  { animation-name: spin3 ; }
#p4  { animation-name: spin4 ; }
#p6  { animation-name: spin6 ; }
#p10 { animation-name: spin10; }

@keyframes spin2  { 100% { transform: rotate(calc(360deg /  2)); } }
@keyframes spin3  { 100% { transform: rotate(calc(360deg /  3)); } }
@keyframes spin4  { 100% { transform: rotate(calc(360deg /  4)); } }
@keyframes spin6  { 100% { transform: rotate(calc(360deg /  6)); } }
@keyframes spin10 { 100% { transform: rotate(calc(360deg / 12)); } }

polygon {
	stroke: #FFFFFF;
	stroke-width: 1px;
	stroke-linejoin: round;
	fill: none;
}