@guilherme4774/svg-avatar-lib

🎨 Gerador determinístico de avatares SVG a partir de hash/seed.

Cria avatares únicos e consistentes para usuários, emails, IDs ou qualquer string de entrada usando algoritmos de hash e RNG determinístico.

Instalação

npm install @guilherme4774/svg-avatar-lib

Uso rápido

import { generateAvatar } from "@guilherme4774/svg-avatar-lib";

// Gerar avatar a partir de uma seed
const { svg, seed, blob } = generateAvatar("[email protected]", {
  size: 300,
  style: "blob"
});

console.log(svg); // String SVG pronta para usar

API

generateAvatar(seed?, options?)

Gera um avatar SVG determinístico.

Parâmetros:

• seed (string, opcional): Entrada para o gerador (email, ID, nome, etc). Se não fornecido, gera um aleatório.
• options (object, opcional):
  • size (number): Tamanho do avatar em pixels. Default: 200
  • style (string): Estilo visual: "blob", "shape", "icon", "avatar". Default: "blob"
  • colors (string[]): Array de cores hex. Default: PRESET_COLORS
  • animated (boolean): Suporte a animações. Default: false

Retorna:

{
  svg: string,      // String SVG completa
  seed: string,     // Seed processada
  blob: Blob        // Blob para download/upload
}

Exemplos

Estilo Blob (padrão)

const { svg } = generateAvatar("user123", { style: "blob", size: 300 });
document.getElementById("avatar").innerHTML = svg;

Estilo Shape (polígonos)

const { svg } = generateAvatar("[email protected]", { 
  style: "shape", 
  size: 200 
});

Estilo Icon (círculos)

const { svg, blob } = generateAvatar("avatar-id-456", { 
  style: "icon", 
  size: 150 
});

Cores personalizadas

const customColors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#FFE66D"];
const { svg } = generateAvatar("custom", { 
  colors: customColors,
  size: 250
});

Exportar como PNG

const { svg, blob } = generateAvatar("[email protected]");

// Converter para PNG
const canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 300;
const ctx = canvas.getContext("2d");
const img = new Image();

img.onload = () => {
  ctx.drawImage(img, 0, 0);
  canvas.toBlob(pngBlob => {
    const link = document.createElement("a");
    link.href = URL.createObjectURL(pngBlob);
    link.download = "avatar.png";
    link.click();
  });
};

img.src = `data:image/svg+xml;base64,${btoa(svg)}`;

Deterministicidade

A mesma seed sempre gera o mesmo avatar:

const result1 = generateAvatar("[email protected]");
const result2 = generateAvatar("[email protected]");

console.log(result1.svg === result2.svg); // true

Isso