Animated Grid Pattern

1<script lang="ts">
2	import { onMount } from "svelte";
3	import { motion } from "motion-sv";
4	import { cn } from "$UTILS$";
5	import type { HTMLAttributes } from "svelte/elements";
6 
7	interface AnimatedGridPatternProps extends HTMLAttributes<SVGElement> {
8		width?: number;
9		height?: number;
10		x?: number;
11		y?: number;
12		strokeDasharray?: number;
13		numSquares?: number;
14		maxOpacity?: number;
15		duration?: number;
16		repeatDelay?: number;
17		class?: string;
18	}
19 
20	type Square = {
21		id: number;
22		pos: [number, number];
23		iteration: number;
24	};
25 
26	let {
27		width = 40,
28		height = 40,
29		x = -1,
30		y = -1,
31		strokeDasharray = 0,
32		numSquares = 50,
33		class: className,
34		maxOpacity = 0.5,
35		duration = 4,
36		repeatDelay = 0.5,
37		...props
38	}: AnimatedGridPatternProps = $props();
39 
40	const id = $props.id();
41	let containerRef: SVGSVGElement | null = $state(null);
42	let dimensions = $state({ width: 0, height: 0 });
43	let squares = $state<Array<Square>>([]);
44 
45	const getPos = (): [number, number] => {
46		return [
47			Math.floor((Math.random() * dimensions.width) / width),
48			Math.floor((Math.random() * dimensions.height) / height),
49		];
50	};
51 
52	const generateSquares = (count: number): Array<Square> => {
53		return Array.from({ length: count }, (_, i) => ({
54			id: i,
55			pos: getPos(),
56			iteration: 0,
57		}));
58	};
59 
60	const updateSquarePosition = (squareId: number) => {
61		const current = squares[squareId];
62		if (!current || current.id !== squareId) return;
63 
64		const nextSquares = squares.slice();
65		nextSquares[squareId] = {
66			...current,
67			pos: getPos(),
68			iteration: current.iteration + 1,
69		};
70 
71		squares = nextSquares;
72	};
73 
74	$effect(() => {
75		if (dimensions.width && dimensions.height) {
76			squares = generateSquares(numSquares);
77		}
78	});
79 
80	onMount(() => {
81		const element = containerRef;
82		if (!element) return;
83 
84		const resizeObserver = new ResizeObserver((entries) => {
85			for (const entry of entries) {
86				const nextWidth = entry.contentRect.width;
87				const nextHeight = entry.contentRect.height;
88				if (dimensions.width !== nextWidth || dimensions.height !== nextHeight) {
89					dimensions = { width: nextWidth, height: nextHeight };
90				}
91			}
92		});
93 
94		resizeObserver.observe(element);
95 
96		return () => {
97			resizeObserver.disconnect();
98		};
99	});
100</script>
101 
102<svg
103	bind:this={containerRef}
104	aria-hidden="true"
105	class={cn(
106		"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
107		className
108	)}
109	{...props}
110>
111	<defs>
112// … truncated