From 41c0481380661d4db52112d061b7db1af164a5c4 Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Fri, 2 Oct 2026 13:31:16 +0200
Subject: [PATCH] Add two random glows with dithering as background.

---
 svelte/src/wrap/MainMenu.svelte | 47 ++++++++++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/svelte/src/wrap/MainMenu.svelte b/svelte/src/wrap/MainMenu.svelte
index f0070fc..7f7388c 100644
--- a/svelte/src/wrap/MainMenu.svelte
+++ b/svelte/src/wrap/MainMenu.svelte
@@ -30,6 +30,15 @@ const min_screen_size_fullscreen_menu = 500
 // If the screen is smaller than this the menu will be closed by default
 const min_screen_size_menu_open = 800
 
+// The two background glows get a random position on each page load, in percent
+// of the viewport. The second one is rerolled until it's at least 40% away from
+// the first
+const glow = [Math.random() * 100, Math.random() * 100, 0, 0]
+do {
+	glow[2] = Math.random() * 100
+	glow[3] = Math.random() * 100
+} while (Math.hypot(glow[0] - glow[2], glow[1] - glow[3]) < 40)
+
 onMount(async () => {
 	if (document.documentElement.clientWidth < min_screen_size_menu_open) {
 		menu_close()
@@ -163,7 +172,13 @@ const set_offset = (off: number) => {
 
 <svelte:window ontouchstart={touchstart} ontouchmove={touchmove} ontouchend={touchend}/>
 
-<div class="wrap">
+<div
+	class="wrap"
+	style:--glow1_x="{glow[0]}%"
+	style:--glow1_y="{glow[1]}%"
+	style:--glow2_x="{glow[2]}%"
+	style:--glow2_y="{glow[3]}%"
+>
 	<div class="nav_container" bind:this={menu}>
 		<div class="scroll_container">
 			<nav class="nav bubble" bind:this={nav}>
@@ -320,8 +335,34 @@ const set_offset = (off: number) => {
 	position: fixed;
 	inset: 0;
 	z-index: -1;
-	/* Without a branding image there's a faint glow in the accent colour */
-	background-image: var(--background_image, radial-gradient(ellipse 70% 60% at 15% 0%, color-mix(in srgb, var(--accent_color) 7%, transparent), transparent));
+	/* Without a branding image there are two faint glows in the accent colour,
+	   at positions which are randomized on each page load */
+	--glow: color-mix(in srgb, var(--accent_color) 7%, transparent);
+	/* Browsers don't dither gradients, so the glows show up as bands of a
+	   single colour step each. A tile of black and white noise on top, at an
+	   opacity of two colour steps, hides the edges of the bands */
+	--noise: url("data:image/svg+xml,\
+		<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'>\
+		<filter id='n' color-interpolation-filters='sRGB'>\
+		<feTurbulence type='fractalNoise' baseFrequency='.9' stitchTiles='stitch'/>\
+		<feColorMatrix values='4 0 0 0 -1.5 4 0 0 0 -1.5 4 0 0 0 -1.5 0 0 0 0 1'/>\
+		</filter>\
+		<rect width='128' height='128' filter='url(%23n)' opacity='.008'/>\
+		</svg>");
+	background-image: var(
+		--background_image,
+		var(--noise),
+		radial-gradient(
+			ellipse 70% 60% at var(--glow1_x) var(--glow1_y),
+			var(--glow),
+			transparent
+		),
+		radial-gradient(
+			ellipse 70% 60% at var(--glow2_x) var(--glow2_y),
+			var(--glow),
+			transparent
+		)
+	);
 	background-color: var(--background_color);
 	background-size: var(--background_image_size, initial);
 	background-position: var(--background_image_position, initial);