Generative Patterns

Signet uses procedural canvas-based halftone dithering as bold compositional elements. These are structural to the layout, not subtle background noise.

Pipeline

Seeded Perlin noise → fbm (fractal Brownian motion) → Bayer 4x4 dither → canvas pixel fill

Seeded Perlin Noise

Use a seeded PRNG for consistent patterns across page reloads:

let seed = 42;
function seededRand() {
  seed = (seed * 16807 + 0) % 2147483647;
  return (seed - 1) / 2147483646;
}

const PERM = new Uint8Array(512);
for (let i = 0; i < 256; i++) PERM[i] = i;
for (let i = 255; i > 0; i--) {
  const j = Math.floor(seededRand() * (i + 1));
  [PERM[i], PERM[j]] = [PERM[j], PERM[i]];
}
for (let i = 0; i < 256; i++) PERM[i + 256] = PERM[i];

function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
function lerp(a, b, t) { return a + t * (b - a); }
function grad(hash, x, y) {
  const h = hash & 3;
  return (h < 2 ? x : -x) + (h === 0 || h === 3 ? y : -y);
}

function noise2d(x, y) {
  const xi = Math.floor(x) & 255, yi = Math.floor(y) & 255;
  const xf = x - Math.floor(x), yf = y - Math.floor(y);
  const u = fade(xf), v = fade(yf);
  const aa = PERM[PERM[xi] + yi], ab = PERM[PERM[xi] + yi + 1];
  const ba = PERM[PERM[xi + 1] + yi], bb = PERM[PERM[xi + 1] + yi + 1];
  return lerp(
    lerp(grad(aa, xf, yf), grad(ba, xf - 1, yf), u),
    lerp(grad(ab, xf, yf - 1), grad(bb, xf - 1, yf - 1), u), v
  );
}

Fractal Brownian Motion (fbm)

function fbm(x, y, octaves = 4) {
  let val = 0, amp = 0.5, freq = 1;
  for (let i = 0; i < octaves; i++) {
    val += amp * noise2d(x * freq, y * freq);
    amp *= 0.5;
    freq *= 2;
  }
  return val;
}

Bayer 4x4 Ordered Dither

Theme-aware — reads --color-dither from CSS so dots adapt to dark/light mode:

const BAYER4 = [
   0,  8,  2, 10,
  12,  4, 14,  6,
   3, 11,  1,  9,
  15,  7, 13,  5,
];

function getDitherColor() {
  return getComputedStyle(document.documentElement)
    .getPropertyValue('--color-dither').trim() || '#f0f0f2';
}

function ditherCanvas(canvas, noiseFn, pixelSize = 4, threshold = 0.5) {
  const rect = canvas.getBoundingClientRect();
  const w = Math.floor(rect.width), h = Math.floor(rect.height);
  if (w === 0 || h === 0) return;
  canvas.width = w;
  canvas.height = h;
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, w, h);
  const cols = Math.floor(w / pixelSize), rows = Math.floor(h / pixelSize);
  ctx.fillStyle = getDitherColor();
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      const val = noiseFn(x, y, cols, rows);
      const bayerVal = BAYER4[(y % 4) * 4 + (x % 4)] / 16;
      if (val + (bayerVal - 0.5) * 0.4 > threshold) {
        ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize - 1, pixelSize - 1);
      }
    }
  }
}

Glitch/Smear Dither

Inspired by rave poster scan distortion. Combines vertical smear (stretched-Y sampling) with horizontal glitch bands (random x-shift):

function glitchNoise(x, y, cols, rows, offsetX = 0, offsetY = 0) {
  const nx = x / cols * 5 + offsetX;
  const ny = y / rows * 3 + offsetY;
  // Base organic shape
  const base = fbm(nx, ny, 5) * 0.5 + 0.5;
  // Vertical smear — sample noise with stretched Y
  const smearY = y / rows * 0.4;
  const smear = fbm(nx * 0.3, smearY + offsetY, 3) * 0.5 + 0.5;
  // Horizontal glitch bands
  const bandNoise = noise2d(0.1, y / rows * 20 + offsetY) * 0.5 + 0.5;
  const glitchShift = bandNoise > 0.65 ? (bandNoise - 0.65) * 8 : 0;
  const shiftedBase = fbm(nx + glitchShift, ny, 4) * 0.5 + 0.5;
  // Combine
  return shiftedBase * 0.5 + smear * 0.3 + base * 0.2;
}

Use different offsetX/offsetY for each block so they don't repeat.

Canvas Layer Recipes

Hero (organic blobs from edges)

pixelSize: 4, threshold: 0.46, opacity: 0.35
Noise: two fbm layers blended 60/40, biased toward edges
Edge fade: min(x/cols, 1-x/cols) * 2 for both axes
min-height: 360px

Right edge bleed

pixelSize: 3, threshold: 0.52, opacity: 0.18
Fixed position, 240px wide, full viewport height
Noise fades in from right: multiply by x/cols

Bold dither blocks (compositional anchors)

pixelSize: 3, threshold: 0.42–0.45, opacity: 0.8
Height: 80–160px, full content width
Use glitch/smear mode for rave poster feel
Placed between sections as visual weight

Section dither bands

pixelSize: 3, threshold: 0.5–0.55, opacity: 0.8
Height: 80px, full content width
"band" variant: stretched horizontal noise
"cloud" variant: radial distance-faded noise

Theme Re-rendering

On theme toggle, all canvases must re-render because dot color changes:

Dark: --color-dither: #f0f0f2 (light dots on dark)
Light: --color-dither: #0a0a0c (dark dots on cream)

Call a renderAllDither() function after toggling data-theme with a short delay (~60ms) so CSS variables have time to update.

Tuning

More dots: lower threshold (0.46 → 0.40)
Fewer dots: raise threshold (0.46 → 0.55)
Larger dots: increase pixelSize (3 → 5)
More organic: increase fbm octaves (4 → 6)
More visible: raise canvas opacity (0.18 → 0.35)
Subtler: lower canvas opacity (0.35 → 0.15)
More glitch: lower glitch band threshold (0.65 → 0.55)
Less glitch: raise glitch band threshold (0.65 → 0.75)

5.2 KiB Raw Blame History Unescape Escape