pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add two random glows with dithering as background.

Browse Source
This commit is contained in:
Wim Brand
2026-10-02 13:31:16 +02:00
parent abe6ea9ff4
commit 41c0481380
1 changed files with 44 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
svelte/src/wrap/MainMenu.svelte
View File

@@ -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 // If the screen is smaller than this the menu will be closed by default
const min_screen_size_menu_open = 800 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 () => { onMount(async () => {
if (document.documentElement.clientWidth < min_screen_size_menu_open) { if (document.documentElement.clientWidth < min_screen_size_menu_open) {
menu_close() menu_close()
@@ -163,7 +172,13 @@ const set_offset = (off: number) => {
<svelte:window ontouchstart={touchstart} ontouchmove={touchmove} ontouchend={touchend}/> <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="nav_container" bind:this={menu}>
<div class="scroll_container"> <div class="scroll_container">
<nav class="nav bubble" bind:this={nav}> <nav class="nav bubble" bind:this={nav}>
@@ -320,8 +335,34 @@ const set_offset = (off: number) => {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: -1; z-index: -1;
/* Without a branding image there's a faint glow in the accent colour */ /* Without a branding image there are two faint glows 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)); 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-color: var(--background_color);
background-size: var(--background_image_size, initial); background-size: var(--background_image_size, initial);
background-position: var(--background_image_position, initial); background-position: var(--background_image_position, initial);