Backlight

1<script lang="ts">
2	import type { Snippet } from "svelte";
3 
4	type Props = {
5		children?: Snippet;
6		class?: string;
7		blur?: number;
8	};
9	let { children, class: className, blur = 10 }: Props = $props();
10	let id = $props.id();
11</script>
12 
13<div class={className}>
14	<svg width="0" height="0" aria-hidden="true">
15		<filter {id} y="-50%" x="-50%" width="200%" height="200%">
16			<feGaussianBlur in="SourceGraphic" stdDeviation={blur} result="blurred"
17			></feGaussianBlur>
18			<feColorMatrix type="saturate" in="blurred" values="4"></feColorMatrix>
19			<feComposite in="SourceGraphic" operator="over"></feComposite>
20		</filter>
21	</svg>
22	<div style="filter: url(#{id})">
23		{@render children?.()}
24	</div>
25</div>