graphycons

Deterministic SVG avatar generation using recursive planar graph subdivision.

Generate lightweight, reproducible geometric avatars from four normalized values. The same inputs always produce identical SVG output.

Zero dependencies. Pure SVG. TypeScript ready.

npm install graphycons

Quick Start

import { generateAvatar, getHue } from "graphycons";

const svg = generateAvatar({
  h: getHue("blue"),
  v: 0.5,
  d: 0.6,
  w: 0.3,
});

document.getElementById("avatar").innerHTML = svg;

Parameters

All parameters are normalized to [0, 1].

| Parameter | Description | | --------- | -------------------------------------------- | | h | Base hue / color | | v | Lightness variation between tiles | | d | Geometric complexity and subdivision density | | w | Border thickness |

Example:

generateAvatar({
  h: 0.61,
  v: 0.5,
  d: 0.8,
  w: 0.2,
});

Hue Presets

import { getHue } from "graphycons";

getHue("red");
getHue("blue");
getHue("lime");

Available presets:

| Preset | Hue | | ------ | ---- | | red | 10° | | blue | 220° | | lime | 85° |

API

generateAvatar()

generateAvatar(input, options?)

interface AvatarInput {
  h: number;
  v: number;
  d: number;
  w: number;
}

interface AvatarOptions {
  size?: number;
}

Returns a complete SVG string.

getHue()

getHue("blue");

Returns a normalized hue value.

HUE_PRESETS

import { HUE_PRESETS } from "graphycons";

HUE_PRESETS.red;
HUE_PRESETS.blue;
HUE_PRESETS.lime;

Use Cases

• Profile avatars
• Researcher profiles
• Academic discovery platforms
• User identity systems
• Data-driven visual identities
• Procedural SVG generation
• Placeholder avatars

Features

• Deterministic output
• Pure SVG
• Zero dependencies
• Framework agnostic
• TypeScript support
• Lightweight bundle size

React Example

import { generateAvatar } from "graphycons";

function Avatar({ h, v, d, w }) {
  const svg = generateAvatar({ h, v, d, w });

  return (
    <img
      src={`data:image/svg+xml,${encodeURIComponent(svg)}`}
      alt="avatar"
    />
  );
}

License

MIT