{
  "path": "/projects/noise-avatar",
  "site": "at://did:plc:ofrbh253gwicbkc5nktqepol/site.standard.publication/3mfyq5mpohw25",
  "tags": [
    "pkgs",
    "typescript",
    "website"
  ],
  "$type": "site.standard.document",
  "title": "@ewanc26/noise-avatar",
  "description": "Deterministic value-noise avatar generation from a string seed — thin wrapper around @ewanc26/noise, works in browsers and Node.js.",
  "publishedAt": "2026-03-09T00:00:00.000Z",
  "textContent": "@ewanc26/noise-avatar generates unique, colourful avatar images from an arbitrary string seed. The same seed always produces the same image. It is a thin opinionated wrapper around @ewanc26/noise, fixing the colour mode to HSL and defaulting to a square 64×64 canvas so you don't have to think about noise options for the common avatar use-case.\n\nPart of the @ewanc26/pkgs monorepo.\n\nInstall\n\nShips as both ESM and CJS with full TypeScript type definitions.\n\nHow it works\n\nEach pixel's colour is computed via bilinear interpolation over a small value-noise grid, using smoothstep blending for a smooth, organic look. The palette is derived from the seed: a djb2 hash determines the base hue, and a seeded LCG PRNG drives the noise grid and colour variance. Because everything is deterministic, the output is stable across environments — the same seed always maps to the same avatar.\n\nThe rendering is delegated entirely to @ewanc26/noise. For full control over dimensions, FBM octaves, and colour modes, use that package directly.\n\nUsage\n\nVanilla JS / TypeScript\n\nSvelte action\n\nThe action re-renders automatically when seed changes via Svelte's update lifecycle.\n\nAPI\n\nrenderNoiseAvatar(canvas, seed, options?)\n\nRenders a deterministic HSL value-noise texture onto canvas at displaySize × displaySize pixels.\n\n| Parameter | Type | Description |\n|---|---|---|\n| canvas | HTMLCanvasElement | Target element — will be resized |\n| seed | string | Arbitrary string seed |\n| options | NoiseAvatarOptions | Optional rendering config |\n\nnoiseAvatarAction(canvas, seed, options?)\n\nSvelte action wrapper. Re-renders whenever seed changes.\n\nRe-exported primitives\n\nhash32, makePrng, hslToRgb, makeValueNoiseSampler, and generateNoisePixels are all re-exported from @ewanc26/noise for convenience.\n\nOptions\n\nAll options are passed as the third argument to renderNoiseAvatar or noiseAvatarAction.\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| gridSize | number | 5 | Side length of the noise grid |\n| displaySize | number | 64 | Width and height of the rendered canvas in pixels |\n| hueRange | number | 60 | Hue spread in degrees around the seed-derived base hue |\n| saturationRange | [number, number] | [45, 70] | Saturation min/max as percentages |\n| lightnessRange | [number, number] | [40, 70] | Lightness min/max as percentages |\n\nExamples\n\nLicence\n\nAGPL-3.0-only — see the pkgs monorepo.",
  "canonicalUrl": "https://docs.ewancroft.uk/projects/noise-avatar"
}