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...
npm create svelte@latest...and start editing src/routes/+page.svelte. When you're ready, click the link below to continue your journey.
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
55
56
<script>
import { onMount } from 'svelte';let characters = ['🥳', '🎉', '✨'];
let confetti = 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);
onMount(() => {let frame;
function loop() {frame = requestAnimationFrame(loop);
confetti = confetti.map((emoji) => {emoji.y += 0.3 * emoji.r;
if (emoji.y > 120) emoji.y = -20;
return emoji;
});
}
loop();
return () => cancelAnimationFrame(frame);
});
</script>
{#each confetti as c}<span
style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})" >{c.character}</span>
{/each}<style>
:global(body) {overflow: hidden;
}
span {position: absolute;
font-size: 5vw;
user-select: none;
}
</style>