I am a massive fan of winter and things related, the dark, the cold and if I am lucky enough to get some, snow.
Where I live we don't get it every year. So I'll add some of my own here.
To do this I used tsparticles. There was a preset to use, which I tried but the particles were to large so I modified an example I found on codepen.
All that was needed, was...
<head>
<script
src="https://cdn.jsdelivr.net/npm/tsparticles-preset-snow@2/tsparticles.preset.snow.bundle.min.js">
</script>
</head>
<body>
<script>
(async () => {
// this is required only if you are not using the bundle script
await loadSnowPreset(tsParticles);
await tsParticles.load("tsparticles", {
particles: {
color: { value: "#fff" },
move: {
direction: "bottom",
enable: true,
outModes: "out",
speed: 0.6
},
number: {
density: {
enable: true,
area: 1500
},
value: 300
},
opacity: {
value: 0.5
},
shape: {
type: "circle"
},
size: {
value: 3
},
wobble: {
enable: true,
distance: 10,
speed: 2
},
zIndex: {
value: { min: 0, max: 100 }
}
}
});
})();
</script>
</body>