Engine Helpers

The deterministic engines that power the components are exposed as plain functions. Use them for downloads, server rendering, custom integrations, or framework-independent SVG generation.

Available helpers

import {
  drawDitherGradient,
  drawMeshGradient,
  generateDitherGradient,
  generateFlowFieldLines,
  generateFlowFieldSvg,
  generateGradientSvg,
  generateIdenticonSvg,
  generateInitialsSvg,
  generateMeshGradient,
  generatePalette,
  gradientToBlob,
  gradientToDataURL,
  renderGradient,
  seedFromString,
  toSeed,
} from '@maxnth/gestalt'

Helper	Description
`drawDitherGradient(ctx, seed, size, variant?)`	Paint palette-quantized dither cells into a 2D canvas context.
`drawMeshGradient(ctx, seed, size)`	Paint the raw mesh into a 2D canvas context.
`renderGradient(canvas, seed, opts?)`	Render a seed into a `<canvas>` with the soft blur.
`gradientToDataURL(seed, opts?)`	Render and return a data URL.
`gradientToBlob(seed, opts?)`	Render and resolve a `Blob`.
`generatePalette(seed)`	Get deterministic colors and harmony for a seed.
`generateMeshGradient(seed, size, variant?)`	Generate gradient geometry without browser APIs.
`generateDitherGradient(seed, size, variant?)`	Generate deterministic dither cells without browser APIs.
`generateGradientSvg(seed, size?, idPrefix?, variant?, mode?)`	Generate a complete gradient SVG document.
`generateIdenticonSvg(seed, size?, opts?)`	Generate a complete identicon SVG document.
`generateInitialsSvg(seed, size?, opts?)`	Generate a complete initials SVG document.
`generateFlowFieldSvg(seed, size?, opts?)`	Generate a complete flow-field SVG document.
`generateFlowFieldLines(seed, size, opts?)`	Generate deterministic flow-field streamlines.
`seedFromString(input)` / `toSeed(seed)`	Normalize a value into the unsigned numeric seed.

Generate a palette

const { seed, colors, harmony } = generatePalette('jane@example.com')

console.log(seed) // numeric seed
console.log(colors) // ["#...", "#...", ...]
console.log(harmony) // e.g. "analogous"

Export as data URL

// 512×512 PNG data URL
const src = gradientToDataURL('jane@example.com', { size: 512 })

// Hard, palette-quantized pixels instead of the soft blur
const ditheredSrc = gradientToDataURL('jane@example.com', {
  size: 512,
  mode: 'dither',
})

Export as Blob

const blob = await gradientToBlob('jane@example.com', { size: 512 })

Generate SVG without a browser

The SVG helpers return a framework-independent SvgAvatarDocument containing the complete viewBox and node tree. The same data powers the built-in Vue components during SSR.

const identicon = generateIdenticonSvg('jane@example.com', 256, {
  gridSize: 7,
  foreground: '#38BDF8',
  background: '#0F172A',
})

const initials = generateInitialsSvg('Jane Doe', 256, {
  mode: 'double',
})

Input limits and colors

Numeric seeds are normalized to unsigned 32-bit integers. NaN and infinite seeds become 0.
Generator sizes are rounded and clamped from 1 through 4096. Non-finite sizes use the helper's default.
Identicon gridSize is rounded and clamped from 1 through 64; its default is 5.
Flow-field counts, geometry, and opacity are clamped to their documented safe ranges.
Built-in color options support CSS hexadecimal #RGB and #RRGGBB only, case-insensitively. Valid colors are normalized to uppercase #RRGGBB. Invalid overrides fall back to deterministic generated colors; invalid entries in a flow-field colors array are ignored.

This deliberately narrow color contract keeps automatic contrast and complete SVG output identical in browsers, Node.js SSR, and other runtimes.

Custom Algorithm

One of the core ideas behind @maxnth/gestalt is that avatars are just deterministic drawing functions. You can write your own algorithm and plug it into the generic <Avatar> component.