Create Unique SVG Avatars in JavaScript – boring-avatars-vanilla

boring-avatars-vanilla is a JavaScript library that generates unique, deterministic SVG avatars from usernames, email addresses, or any string input.

It returns SVG markup as a string, so you can inject it into the DOM, write it to a file on the server, or store it as generated output in your own workflow.

Features:

• 6 avatar variants: marble, beam, pixel, sunset, ring, and bauhaus.
• Fully customizable color palette via an array of hex color strings.
• Circular and square output modes.
• Configurable avatar size as a pixel number or any valid CSS string value.
• Optional accessible title element for screen reader support.
• Compatible with browser DOM injection and Node.js server-side file generation.

Use Cases:

• Replace placeholder initials in user profile menus and comment sections.
• Generate consistent team member avatars for internal dashboards.
• Populate mock user interfaces during prototyping and development.
• Create unique placeholder imagery for documentation screenshots.

How To Use It:

1. Install boring-avatars-vanilla and import it into your project.

# NPM
$ npm install boring-avatars-vanilla

import boring from 'boring-avatars-vanilla';

2. Generate an SVG string from a username:

const svg = boring({ name: 'CSSScript' });

3. Inject the avatar directly into a DOM element:

document.getElementById('user-avatar').innerHTML = svg;

4. You can also load the UMD build directly in any HTML page. The library exposes a global BoringAvatars object.

<!-- Load the UMD build from unpkg -->
<script src="https://unpkg.com/boring-avatars-vanilla/dist/index.umd.js"></script>
<div id="user-avatar"></div>

// Generate a beam-style avatar using the global BoringAvatars object
const svg = BoringAvatars.boring({
  name: 'CSSScript',
});

// Inject the SVG into the target element
document.getElementById('user-avatar').innerHTML = svg;

5. Node.js Server-Side Rendering:

import boring from 'boring-avatars-vanilla';
import fs from 'fs';

// Generate the SVG string on the server
const svg = boring({
  name: 'CSSScript'
});

// Write the SVG directly to a file
fs.writeFileSync('jordan-avatar.svg', svg);

6. All available configuration options.

• name (string): The input string used to generate the avatar. Accepts a username, email address, or any arbitrary string. Defaults to 'Clara Barton'.
• variant (string): The visual style of the avatar. Accepted values are marble, beam, pixel, sunset, ring, and bauhaus. Defaults to 'marble'.
• size (number | string): The rendered width and height of the avatar. Pass a number for pixel output or a CSS string such as '3rem'. Defaults to '40px'.
• colors (array): An array of hex color strings that form the avatar’s palette. The library draws from this array when assigning colors to each visual element. Defaults to ['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90'].
• square (boolean): When set to true, the avatar renders as a square shape. Defaults to false, which produces a circular avatar.
• title (boolean): When set to true, the SVG output includes a <title> element containing the name value. This improves accessibility for screen readers. Defaults to false.

// Generate a fully customized avatar
const svg = boring({
  name: 'Morgan Blake', 
  variant: 'bauhaus',
  size: 96, 
  colors: [
    '#1A202C',
    '#2D3748',
    '#F6AD55',
    '#68D391',
    '#76E4F7'
  ],
  square: false,
  title: true
});

Alternatives:

• faces.js: Generate Random Cartoon Avatars With JS And SVG.
• Retro Avatar Generator: Generate Pixel Avatars From Unique Identifiers.
• Avatar.js: Custom User Avatar Generator.
• Squareicon: Generate Github-style Identicon Avatars With Squares.

FAQs:

Q: Will the same username always produce the same avatar?
A: Yes. The library hashes the name string into a deterministic integer using bitwise operations. That integer drives every visual decision.

Q: Two different usernames are producing very similar avatars. What’s happening?
A: The hash function uses bitwise arithmetic that can occasionally map different strings to similar integers. Prepend a unique identifier such as a user ID to the name string (e.g., '4821-jordan') to increase variation across your user base.

Q: How do I use the avatar as an <img> src attribute instead of inline SVG?
A: Convert the SVG string to a Base64 data URI. In the browser, use 'data:image/svg+xml;base64,' + btoa(svg). In Node.js, use 'data:image/svg+xml;base64,' + Buffer.from(svg).toString('base64'). Assign the result to the src attribute of an <img> element.

The post Create Unique SVG Avatars in JavaScript – boring-avatars-vanilla appeared first on CSS Script.