Give the page background a casino felt texture

Replace the flat radial green with a layered body background: a soft overhead light and an edge vignette over a fine grain tiled across the green gradient. The grain is a tiny seamless SVG tile (feTurbulence fractal noise mapped to semi-transparent black speckles, stitchTiles so it repeats without seams) committed under web/assets, so it rides the existing asset pipeline and works offline; the palette and panel/card colors are unchanged.
2026-10-09 01:26:31 +00:00
parent 637b711fa8
commit 7883d0c458
2 changed files with 32 additions and 5 deletions
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
+  <!-- Seamless felt grain: fractal noise mapped to semi-transparent black
+       speckles, tiled as a CSS background over the green table gradient.
+       stitchTiles + a filter region equal to the tile keep the seams
+       invisible. -->
+  <filter id="felt" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
+    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch" result="noise"/>
+    <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.3 0.3 0.3 0 -0.3"/>
+  </filter>
+  <rect width="240" height="240" filter="url(#felt)"/>
+</svg>