Randomly (but beautifully) coloured SVG flowers

flowerhash.svelte

<script>
	let name = 'world';

	let map = []
	let colours = []
	const petals = 13

	const hue = Math.random() * 360
	const stdev = 10

	const random = () =>
	    Math.sqrt(-Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random()) * stdev

	function rainbow(step) {
			const l = Math.random() * 0.6 + 0.4
			const c = Math.random() * 0.25 + 0.15
			return `oklch(${l} ${c} ${hue+random()})`
	}
	
	for (let i = 0; i < petals; i++) {
		map.push(360 / petals * i)
		colours.push(rainbow(i))
	}
</script>

<svelte:options runes />

{#snippet petal(rot, i)}
	<path
		shape-rendering="crispEdges"
		transform="translate(50 10) rotate({rot} 8 40)"
		d="M8 0C2.4 0 0 5 0 12C0 19 8 36 8 36V0Z"
		fill={colours[i]}/>
{/snippet}
{#snippet petal2(rot, i)}
	<path
		shape-rendering="crispEdges"
		transform="translate(50 10) rotate({rot} 8 40)"
		d="M8 0C13.6 0 16 5 16 12C16 19 8 36 8 36V0Z"
		fill={colours[i]} />
{/snippet}

<svg
	width="500"
	height="500"
	viewBox="10 10 90 90"
	xmlns="http://www.w3.org/2000/svg">
	{#each map as rot, i}
		{@render petal(rot, i)}
	{/each}
	{#each map as rot, i}
		{@render petal2(rot, i)}
	{/each}
	<circle cx="58" cy="50" r="18" fill="#ff6" stroke="black" stroke-width="1"/>
</svg>