Part 3 / Next steps / Congratulations!
You've now finished the Svelte tutorial and are ready to start building apps. You can refer back to individual chapters at any time (click the title above to reveal a dropdown) or continue your learning via the API reference, Examples and Blog. If you're a Twitter user, you can get updates via @sveltejs.
To get set up in your local development environment, check out the quickstart guide.
If you're looking for a more expansive framework that includes routing, server-side rendering and everything else, take a look at SvelteKit.
Most importantly: since you're now a member of the Svelte community, you should join our friendly Discord chatroom. That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.
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.7 * 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>
initialising