html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<!--
https://codepen.io/Shokeen/pen/bpoPOz
-->
</head>
<body>
<div id="snowfall"></div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
}
* {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
#snowfall {
width: 100%;
height: 100vh;
background: cornflowerblue;
}
Enter to Rename, Shift+Enter to Preview
js
js
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
function start(){
particlesJS("snowfall", {
"particles": {
"number": {
"value": 100
},
"shape": {
"type": "circle"
},
"size": {
"value": 10,
"random": true
},
"line_linked": {
"enable": false
},
"move": {
"enable": true,
"speed": 2,
"direction": "bottom",
"straight": false
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run