<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>

@import 'compass/css3';

$d: 5em;

// $n-point star
// $k = disc radius relative to star circumradius
// $p = rounding precision
@mixin star($n: 5, $k: .65, $p: 3) {
	$m: 2*$n;
	$ba: 360deg/$m;
	$la: $ba/$p;
	$ro: 50%;
	$ri: $k*$ro;
	$plist: ();
	
	@for $i from 0 to $m {
		$sa: ($i - .5)*$ba - 90deg;
		
		@if $i%2 == 0 { // pointy part
			$ma: $sa + .5*$ba;
			
			$plist: $plist, 
				$ro + $ri*cos($sa) $ro + $ri*sin($sa), 
				$ro + $ro*cos($ma) $ro + $ro*sin($ma)
		}
		@else { // round part
			@for $j from 0 to $p {
				$ca: $sa + $j*$la;
				
				$plist: $plist, 
					$ro + $ri*cos($ca) $ro + $ri*sin($ca)
			}
		}
	}
	
	--poly: #{polygon($plist)};
	-webkit-clip-path: var(--poly);
					clip-path: var(--poly);
}

body:before {
	display: block;
	margin-bottom: 1em;
	font: 1em consolas, monaco, monospace;
	content: '1 element stars with clip-path'
}

.star {
	display: inline-block;
	width: $d; height: $d;
	background: gold;
	
	&:nth-child(1) { @include star(3, .25) }
	
	&:nth-child(2) { @include star(4, .35) }
	
	&:nth-child(3) { @include star(5, .32) }
	
	&:nth-child(4) { @include star(5, .51) }
	
	&:nth-child(5) { @include star(6, .29) }
	
	&:nth-child(6) { @include star(6, .5) }
	
	&:nth-child(7) { @include star(7, .27) }
	
	&:nth-child(8) { @include star(7, .57) }
	
	&:nth-child(9) { @include star(7) }
	
	&:nth-child(10) { @include star(8, .39) }
	
	&:nth-child(11) { @include star(8, .53) }
	
	&:nth-child(12) { @include star(8) }
	
	&:nth-child(13) { @include star(8, .75) }
	
	&:nth-child(14) { @include star(9, .39) }
	
	&:nth-child(15) { @include star(9, .53) }
	
	&:nth-child(16) { @include star(9) }
	
	&:nth-child(17) { @include star(9, .75) }
	
	&:nth-child(18) { @include star(10, .39) }
	
	&:nth-child(19) { @include star(10, .53) }
	
	&:nth-child(20) { @include star(10) }
	
	&:nth-child(21) { @include star(10, .75) }
	
	&:nth-child(22) { @include star(11, .39) }
	
	&:nth-child(23) { @include star(11, .53) }
	
	&:nth-child(24) { @include star(11) }
	
	&:nth-child(25) { @include star(11, .75) }
	
	&:nth-child(26) { @include star(12, .39) }
	
	&:nth-child(27) { @include star(12, .53) }
	
	&:nth-child(28) { @include star(12) }
	
	&:nth-child(29) { @include star(12, .75) }
	
	&:nth-child(30) { @include star(13, .39) }
	
	&:nth-child(31) { @include star(13, .53) }
	
	&:nth-child(32) { @include star(13) }
	
	&:nth-child(33) { @include star(13, .75) }
	
	&:nth-child(34) { @include star(14, .39) }
	
	&:nth-child(35) { @include star(14, .53) }
	
	&:nth-child(36) { @include star(14) }
	
	&:nth-child(37) { @include star(14, .75) }
	
	&:nth-child(38) { @include star(15, .39) }
	
	&:nth-child(39) { @include star(15, .53) }
	
	&:nth-child(40) { @include star(15) }
	
	&:nth-child(41) { @include star(15, .75) }
	
	&:nth-child(42) { @include star(16, .39) }
	
	&:nth-child(43) { @include star(16, .53) }
	
	&:nth-child(44) { @include star(16) }
	
	&:nth-child(45) { @include star(16, .75) }
}