GitHub Avatar Generator

输入字符串，生成 GitHub 风格头像
Generate GitHub-style identicons from any string

---

Live Demo | 在线体验

https://tuning-luna.github.io/github-avatar-generator/

Features | 特性

• SHA-256 Based - Deterministic, unique avatar for any input
• 1000 x 1000px HD Output - High-resolution PNG source canvas
• Adjustable Border - Add a background-colored border and set its width with a slider (0-200px), previewed live before saving
• Explicit Preview - Edit a seed, then press Generate or Enter to commit it
• Random Generator - Quick random name with number suffix
• Responsive - Works with keyboard, mobile widths, and short landscape viewports
• Accessible feedback - Labeled input, named canvas, and visible status messages

Run locally | 本地运行

This is a zero-build vanilla ES module app. No package installation is required for the app itself. Serve the repository from a local HTTP server so Web Crypto and module loading work:

npx serve .

Then open the printed localhost URL. VS Code Live Server also works. Do not open index.html with file://.

Verify | 验证

Run the dependency-free Node regression tests with Node 20 or newer:

node --test tests/*.test.mjs

The tests cover hashing, color conversion, deterministic mirrored rendering, Unicode/empty seeds, and the shared export-canvas dimensions. Browser-only behavior (clipboard permissions, downloads, responsive layout) should be checked from a localhost server.

How It Works | 工作原理

1. Input -> Trim the submitted string; the renderer lowercases it for hashing
2. Hash -> Compute SHA-256
3. Color -> Extract HSL from the hash and convert it to RGB
4. Pattern -> Use hash bits to determine 5 x 5 mirrored grid cells
5. Render -> Draw on an HTML5 canvas at 1000 x 1000 resolution
6. Export -> Download or copy a PNG with an optional matching-color border of any width from 0 to 200px per side (1000 x 1000px up to 1400 x 1400px)

The rendering algorithm lives in core/. UI state and browser actions live in ui/; the app does not import or depend on the supplied design-system/ directory.

License

See LICENSE for project licensing details.