Logo Generator

A deterministic avatar/logo generator that creates unique SVG designs based on input text. The generator produces consistent, visually appealing designs that are perfect for avatars, logos, or decorative elements.

Features

• Generates unique SVG designs based on input text
• Deterministic output (same input always produces the same design)
• 5 distinct pattern families:
  • Grid Pattern (6x6 classic grid)
  • Mosaic Pattern (12x12 dense grid)
  • Triangular Pattern (geometric designs)
  • Space Invaders Pattern (retro pixel art style)
  • Circular Pattern (symmetric circular designs)
• 15+ carefully curated color palettes including:
  • Modern vibrant schemes
  • Pastel combinations
  • Vivid duotones
  • Nature-inspired palettes
  • Muted professional colors
  • Cool neon variants
  • Retro color schemes
  • Soft gradients
• 5 variants within each pattern family
• Pure TypeScript/JavaScript with no dependencies
• Outputs clean, optimized SVG
• Full TypeScript type definitions

Installation

npm install @rajesh-200/logo-generator

Usage

import { generateAvatarSVG } from '@rajesh-200/logo-generator';

// Generate an SVG with default size (240x240)
const svg = generateAvatarSVG('hello world');

// Generate an SVG with custom size
const largeSvg = generateAvatarSVG('hello world', 480);

// Use in HTML
document.getElementById('avatar').innerHTML = svg;

API

generateAvatarSVG(text: string, size?: number, patternType?: number): string

Generates an SVG logo based on the input text.

Parameters:

• text: The input text that determines the design (required)
• size: The size of the SVG in pixels (optional, default: 240)
• patternType: The specific pattern family to use (optional):
  • 0: Grid Pattern - 6x6 classic grid with various shapes
  • 1: Mosaic Pattern - 12x12 dense grid for detailed designs
  • 2: Triangular Pattern - Geometric designs with triangular tiles
  • 3: Space Invaders Pattern - Retro pixel art style
  • 4: Circular Pattern - Symmetric circular designs
  If not provided, the pattern is selected deterministically based on the input text.

Returns:

• A string containing the SVG code

Notes:

• Each pattern type has 5 variants that are selected deterministically from the input text
• The color palette is also selected deterministically from 15+ carefully curated options
• The output is consistent: the same input text will always generate the same design

Examples

// Generate with default settings (pattern selected from text)
const defaultSvg = generateAvatarSVG('hello world');

// Generate a larger grid pattern specifically
const gridSvg = generateAvatarSVG('hello world', 480, 0);

// Generate a space invaders style pattern
const pixelArtSvg = generateAvatarSVG('hello world', 240, 3);

Pattern Types

The generator creates five main types of patterns:

1. Grid Pattern (type 0)

   • 6x6 classic grid
   • Shape variants: squares, circles, rounded squares, diamonds, outlines
   • Perfect for simple, bold logos

2. Mosaic Pattern (type 1)

   • 12x12 dense grid for intricate designs
   • Same shape variations as the grid pattern
   • Ideal for detailed avatars

3. Triangular Pattern (type 2)

   • Geometric design based on triangular tiles
   • Variants include different arrangements and decorative elements
   • Optional gradients and outlines
   • Great for modern, geometric logos

4. Space Invaders Pattern (type 3)

   • Retro pixel art style inspired by classic games
   • Symmetric design with pixel-perfect edges
   • Perfect for gaming-related avatars or retro style

5. Circular Pattern (type 4)

   • Symmetric circular designs
   • Multiple layers and arrangements
   • Ideal for softer, more organic logos

Each pattern type has 5 variants that are automatically selected based on the input text, and uses colors from the 15+ carefully curated palettes.

License

MIT

Author

raJEsh-200