<style>
	#sun_flower { background: beige; }
	.segment1, .segment2:hover { fill: url(#rGradient); stroke: orange; }
	.segment2, .segment1:hover { fill: orange; stroke: orange; }
</style>

<svg id="sun_flower" width="600" height="600" viewBox="-300 -300 600 600">
	<defs>
		<radialGradient id="rGradient" cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse">
			<stop offset="33%" stop -color="lightblue" stop-opacity="0.2" />
			<stop offset="100%" stop-color="azure" stop-opacity="1" />
		</radialGradient>
	</defs>
</svg> 

<script>

let gNum = 20;
let ns = 'http://www.w3.org/2000/svg';

let path1 = '<path class="segment1" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />',
	path2 = '<path class="segment2" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />';

for(j = 0; j < gNum; j++) {
	let g1 = document.createElementNS(ns, 'g'),
		g2 = document.createElementNS(ns, 'g');  

	g1.setAttribute('transform', 'rotate(' + 360 / gNum * j + ')');
	g1.innerHTML = path1;

	g2.setAttribute('transform', 'rotate(' + 360 / gNum * j + ') scale(0.33)');
	g2.innerHTML = path2;

	sun_flower.appendChild(g1);
	sun_flower.appendChild(g2);
}

</script>