Dot Pattern

1<script lang="ts">
2	import { onMount } from "svelte";
3	import { motion } from "motion-sv";
4	import { cn } from "$UTILS$";
5	import type { SVGAttributes } from "svelte/elements";
6 
7	interface DotPatternProps extends SVGAttributes<SVGSVGElement> {
8		width?: number;
9		height?: number;
10		x?: number;
11		/**
12		 * The y-offset of the entire pattern
13		 */
14		y?: number;
15		/**
16		 * The x-offset of individual dots
17		 */
18		cx?: number;
19		/**
20		 * The y-offset of individual dots
21		 */
22		cy?: number;
23		/**
24		 * The radius of each dot
25		 */
26		cr?: number;
27		class?: string;
28		/**
29		 * Whether dots should have a glowing animation effect
30		 */
31		glow?: boolean;
32	}
33 
34	let {
35		width = 16,
36		height = 16,
37		x = 0,
38		y = 0,
39		cx = 1,
40		cy = 1,
41		cr = 1,
42		class: className,
43		glow = false,
44		...props
45	}: DotPatternProps = $props();
46 
47	const id = $props.id();
48	let containerRef: SVGSVGElement | null = $state(null);
49	let dimensions = $state({ width: 0, height: 0 });
50 
51	onMount(() => {
52		const updateDimensions = () => {
53			if (containerRef) {
54				const rect = containerRef.getBoundingClientRect();
55				dimensions = { width: rect.width, height: rect.height };
56			}
57		};
58 
59		updateDimensions();
60		window.addEventListener("resize", updateDimensions);
61		return () => window.removeEventListener("resize", updateDimensions);
62	});
63 
64	const dots = $derived(
65		Array.from(
66			{
67				length: Math.ceil(dimensions.width / width) * Math.ceil(dimensions.height / height),
68			},
69			(_, i) => {
70				const col = i % Math.ceil(dimensions.width / width);
71				const row = Math.floor(i / Math.ceil(dimensions.width / width));
72				return {
73					x: col * width + cx,
74					y: row * height + cy,
75					delay: Math.random() * 5,
76					duration: Math.random() * 3 + 2,
77				};
78			}
79		)
80	);
81</script>
82 
83<svg
84	bind:this={containerRef}
85	aria-hidden="true"
86	class={cn("pointer-events-none absolute inset-0 h-full w-full text-neutral-400/80", className)}
87	{...props}
88>
89	<defs>
90		<radialGradient id={`${id}-gradient`}>
91			<stop offset="0%" stop-color="currentColor" stop-opacity="1" />
92			<stop offset="100%" stop-color="currentColor" stop-opacity="0" />
93		</radialGradient>
94	</defs>
95	{#each dots as dot (dot.x + "-" + dot.y)}
96		<motion.circle
97			cx={dot.x}
98			cy={dot.y}
99			r={cr}
100			fill={glow ? `url(#${id}-gradient)` : "currentColor"}
101			initial={glow ? { opacity: 0.4, scale: 1 } : {}}
102			animate={glow
103				? {
104						opacity: [0.4, 1, 0.4],
105						scale: [1, 1.5, 1],
106					}
107				: {}}
108			transition={glow
109				? {
110						duration: dot.duration,
111// … truncated