Core

@humation/core renders avatars to SVG without React. Use it in Node, Cloudflare Workers, export jobs, tests, or a framework of your own.

bun add @humation/core @humation/assets-humation-1

pnpm add @humation/core @humation/assets-humation-1

npm install @humation/core @humation/assets-humation-1

yarn add @humation/core @humation/assets-humation-1

createAvatar

createAvatar takes a manifest and the same options the React component accepts, and returns an object you can convert into the shape you need.

import { createAvatar } from '@humation/core';
import { humation1 } from '@humation/assets-humation-1';

const avatar = createAvatar(humation1, {
  seed: 'felix',
  colors: { hair: '#123456', skin: '#FFEECC' }
});

avatar.toString(); // '<svg ...>...</svg>'
avatar.toDataUri(); // 'data:image/svg+xml;charset=utf-8,...'
avatar.toJSON(); // resolved selections, colors, background, crop

toJSON() is the useful one when a seed produced the avatar and you want to store what it actually resolved to. See Saving state.

Wrapping core in your own component

If you are building a framework wrapper, toRenderData() gives you the composed fragments without the root <svg> element, background rect, or inline color style. Colors stay as var(--hm-*, fallback) references, so your wrapper can drive them through CSS custom properties without re-rendering the content.

const { viewBox, background, colors, content } = createAvatar(humation1, {
  seed: 'felix'
}).toRenderData();

This is exactly what @humation/react does internally.