Noise Texture

1<script lang="ts">
2	import type { SVGAttributes } from "svelte/elements";
3	import { cn } from "$UTILS$";
4 
5	interface NoiseTextureProps extends SVGAttributes<SVGSVGElement> {
6		class?: string;
7		/**
8		 * `baseFrequency` for `feTurbulence`; higher values yield finer-grained noise.
9		 * @default 0.4
10		 */
11		frequency?: number;
12		/**
13		 * `numOctaves` for `feTurbulence`; more octaves add detail at smaller scales.
14		 * @default 6
15		 */
16		octaves?: number;
17		/**
18		 * Linear slope on each channel after desaturation; adjusts contrast of the noise.
19		 * @default 0.15
20		 */
21		slope?: number;
22		/**
23		 * Opacity of the filled noise layer (`rect`).
24		 * @default 0.6
25		 */
26		noiseOpacity?: number;
27	}
28 
29	let {
30		class: className,
31		frequency = 0.4,
32		octaves = 6,
33		slope = 0.15,
34		noiseOpacity = 0.6,
35		...props
36	}: NoiseTextureProps = $props();
37 
38	let filterId = $props.id();
39</script>
40 
41<svg
42	class={cn(
43		"pointer-events-none absolute inset-0 z-0 size-full opacity-50 select-none dark:opacity-[0.75]",
44		className
45	)}
46	xmlns="http://www.w3.org/2000/svg"
47	{...props}
48>
49	<filter id={filterId}>
50		<feTurbulence
51			type="fractalNoise"
52			baseFrequency={frequency}
53			numOctaves={octaves}
54			stitchTiles="stitch"
55		/>
56		<feColorMatrix type="saturate" values="0" />
57		<feComponentTransfer>
58			<feFuncR type="linear" {slope} />
59			<feFuncG type="linear" {slope} />
60			<feFuncB type="linear" {slope} />
61		</feComponentTransfer>
62	</filter>
63	<rect width="100%" height="100%" filter={`url(#${filterId})`} opacity={noiseOpacity} />
64</svg>