<snow-fall>

by WebComponents

HTML

<style>
			body {
				color: #fff;
				background-color: #444;
				height: 100vh;
				margin: 0;
				font-family: system-ui, sans-serif;
			}
			a[href],
			a[href]:visited {
				color: inherit;
			}
			div {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				gap: .5em;
				text-align: center;
			}
		</style>
		<script type="module" src="https://zachleat.github.io/snow-fall/snow-fall.js"></script>
		<main>
			<snow-fall></snow-fall>
			<div style="min-height: 100vh">
				<p>&lt;snow-fall&gt; on Page</p>
				<snow-fall style="--snow-fall-color: rebeccapurple; --snow-fall-size: 20px">
					<div style="width: 300px; height: 300px; background-color: white; color: #222;">
						<p>&lt;snow-fall&gt; on Element<br>(custom color, size)<br><a href="https://github.com/zachleat/snow-fall">Test link</a></p>
					</div>
				</snow-fall>
				<p><a href="https://github.com/zachleat/snow-fall">Source code</a> and <a href="https://www.zachleat.com/web/snow-fall/">Blog post</a></p>
			</div>
		</main>