Recursive Christmas Tree

Challenge

Source code

+page.svelte

<script>
	import ChristmasTree from './ChristmasTree.svelte';
</script>

<h1>Recursive Christmas Tree</h1>
<div>
	<ChristmasTree size={7} />
</div>

<style>
	div {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-bottom: 1rem;
	}
</style>

+page.ts

export const prerender = true;

ChristmasTree.svelte

<script lang="ts">
	import { fade } from 'svelte/transition';
	export let size = 1;
</script>

{#if size > 1}
	<svelte:self size={size - 1} />
{/if}
<div class="tree" in:fade={{ delay: size * 100 }} style:--color="var(--green-{size})">
	{#each { length: size } as _}
		<div class="leaf" />
	{/each}
</div>

<style>
	.tree {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.leaf {
		position: relative;
		border-radius: var(--radius-round);
		background: var(--color);
		width: var(--size-9);
		height: var(--size-9);
		margin: -0.5rem;
	}
</style>