//- change these three values to change the shape of the star
//- n is the number of star points (must be at least 3)
//- rf is a factor between 0 and 1; the smaller it is, the pointier the star
//- hf is a height factor that controls the height of the two star pyramids making up the star
- let n = 5, rf = .5, hf = .3;

//- computed values
- let m = 2*n, ba = Math.PI/n, cos_ba = Math.cos(ba);
- let rri = rf*cos_ba, rh = hf;
- let sq = 1 + Math.pow(rri, 2) - 2*rri*cos_ba;
- let re = Math.sqrt(sq);
- let cos_ax = .5*(1 + sq - Math.pow(rri, 2))/re;
- let rad_ax = Math.acos(cos_ax);
- let rad_ay = Math.atan(Math.sin(rad_ax)/rh);
- let rsw = +Math.hypot(rh, Math.sin(rad_ax)).toFixed(2);
- let rsh = +cos_ax.toFixed(2);
- let deg_ax = +(rad_ax*180/Math.PI).toFixed(2);
- let deg_ay = +(rad_ay*180/Math.PI).toFixed(2);
- let rcm = +(.5*(.5*Math.PI - rad_ax)/Math.PI).toFixed(3);

style
	| .arm { --q: 0 }
	| .arm:nth-child(n + #{n + 1}) { --q: 1 }
	- for(let i = 0; i < n; i++)
		| .arm:nth-child(#{n}n + #{i + 1}) { --i: #{i} }
div(class='⭐' style=`--n: ${n}; --re: ${+re.toFixed(2)}; --rsw: ${rsw}; --rsh: ${rsh}; --ax: ${deg_ax}deg; --ay: ${deg_ay}deg; --rcm: ${rcm}`)
	- for(let i = 0; i < m; i++)
		.arm

$ro: 16em;
$w: 4em;
$t: 12s;

@property --houdini {
	syntax: '<integer>';
	initial-value: 1;
	inherits: true
}

body, div { display: grid }

body {
	--s: var(--houdini, 0);
	--not-s: calc(1 - var(--s));
	overflow: hidden;
	margin: 0;
	height: 100vh;
	perspective: 35em;
	background: #000014
}

div, ::before, ::after { grid-area: 1/ 1 }

div { transform-style: preserve-3d }

.⭐ { animation: rot-y $t linear infinite }

@keyframes rot-y { to { transform: rotateY(1turn) } }

@property --int {
	syntax: '<integer>';
	initial-value: 0;
	inherits: false
}

.arm {
	--sgn-q: calc(2*var(--q) - 1);
	--p: calc(var(--i)/var(--n));
	--not-up: Min(1, var(--i));
	--up: calc(1 - var(--not-up));
	--dif: calc(2*var(--i) - var(--n));
	--not-dn: Min(1, Max(var(--dif), calc(-1*var(--dif))));
	--dn: calc(1 - var(--not-dn));
	place-self: center;
	height: 0;
	transform: rotatex(calc(var(--p)*1turn)) translatey(-$ro);
	
	&::before, &::after {
		--k: 0;
		--sgn-k: calc(2*var(--k) - 1);
		--sum: calc(var(--p) + var(--sgn-k)*var(--rcm) + 1);
		--int: calc(var(--sum) - .5);
		--mod: calc(var(--sum) - var(--int));
		--term: calc(var(--s)*var(--mod) + var(--not-s)*var(--p));
		--abs: Max(calc(var(--term) - .5), calc(.5 - var(--term)));
		--inc: calc(2*var(--abs) - .5);
		--sgn-j: calc(var(--dn)*var(--sgn-k) - 
									var(--up)*var(--sgn-k) + 
									var(--not-dn)*var(--not-up)*clamp(-1, var(--dif), 1));
		--j: calc(.5*(var(--sgn-j) + 1));
		--sh: calc(.25*(3*var(--q) - var(--sgn-q)*(1 - var(--j))));
		width: calc(2*var(--rsw)*#{$ro}); height: calc(var(--rsh)*#{$ro});
		transform-origin: 50% 0;
		transform: 
			rotatey(calc(var(--k)*.5turn)) 
			rotatex(var(--ax)) 
			scalex(calc(var(--sgn-q)*var(--sgn-k))) 
			rotatey(var(--ay));
		background: 
			repeating-radial-gradient(circle at 100% 100%, 
					transparent 0 5px, hsla(47, 100%, calc(44%*(1 + var(--inc))), .3), transparent 7px), 
			repeating-radial-gradient(circle at 100% 100%, 
					transparent 0 11px, hsla(48, 100%, calc(45%*(1 + var(--inc))), .3), transparent 13px), 
			repeating-radial-gradient(circle at 100% 100%, 
					transparent 0 17px, hsla(49, 100%, calc(47%*(1 + var(--inc))), .3), transparent 19px), 
			repeating-radial-gradient(circle at 100% 100%, 
					transparent 0 41px, hsla(41, 100%, calc(43%*(1 + var(--inc))), .3), transparent 43px), 
			linear-gradient(90deg, 
					transparent 50%, 
					hsl(40, 100%, calc(50%*(1 + var(--inc)))) 0, 
					hsl(55, 100%, calc(52%*(1 + var(--inc)))));
		background-blend-mode: multiply;
		clip-path: polygon(50% 0, 50% calc(var(--re)*#{$ro}), 100% 100%);
		animation: shade .5*$t ease-in-out calc((var(--sh) + .125)*#{-$t}) infinite alternate;
		content: ''
	}
		
	&::after { --k: 1 }
}

@keyframes shade { to { filter: brightness(.2) } }

/* absolutely no JS */