Skip to main content
Advanced Svelte Next steps Congratulations!

You’ve now finished the Svelte tutorial and are ready to start building.

The next two parts of the tutorial will focus on SvelteKit, a full-fledged framework for creating apps of all shapes and sizes.

If you’re suffering from information overload and aren’t ready to go through the SvelteKit tutorial yet, don’t worry! You can use your existing Svelte knowledge without learning all of SvelteKit. Just run this in your terminal and follow the prompts...

npx sv create

...and start editing src/routes/+page.svelte. When you’re ready, click the link below to continue your journey.

Edit this page on GitHub

previous next
Exports
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script>
	let characters = ['🥳', '🎉', '✨'];
 
	let confetti = $state(new Array(100)
		.fill()
		.map((_, i) => {
			return {
				character:
					characters[i % characters.length],
				x: Math.random() * 100,
				y: -20 - Math.random() * 100,
				r: 0.1 + Math.random() * 1
			};
		})
		.sort((a, b) => a.r - b.r));
 
	$effect(() => {
		let frame = requestAnimationFrame(function loop() {
			frame = requestAnimationFrame(loop);
 
			for (const confetto of confetti) {
				confetto.y += 0.3 * confetto.r;
				if (confetto.y > 120) confetto.y = -20;
			}
		});
 
		return () => {
			cancelAnimationFrame(frame);
		}
	});
</script>
 
{#each confetti as c}
	<span
		style:left="{c.x}%"
		style:top="{c.y}%"
		style:scale={c.r}
	>
		{c.character}
	</span>
{/each}
 
<style>
	span {
		position: absolute;
		font-size: 5vw;
		user-select: none;
	}
 
	:global(body) {
		overflow: hidden;
	}
</style>