identicon.js

Screenshot

GitHub-style identicons as PNGs or SVGs in JS.

This little library will produce the same shape and (nearly) the same color as GitHub when given the same hash value. Supports PNG and SVG output formats. Note that GitHub uses an internal database identifier for the hash, so you can't simply md5 the username and get the same result. The creative visual design is borrowed from Jason Long of Git and GitHub fame.

Demo

View Demo

Installation

npm install identicon.js --save

Options

hash - A hexadecimal string of 15+ characters that will be used to generate the image.
options - [Optional] An options object used to customize the generated image.
- size - The size in pixels of the height and width of the generated (square) image. Defaults to 64 pixels.
- margin - The decimal fraction of the size to use for margin. For example, use 0.2 for a 20% margin. Defaults to 0.08 for an 8% margin.
- foreground - The foreground color is automatically derived from the hash value. Use this option to override that behavior and provide a rgba value array instead (e.g. [255,0,0,255] for red).
- background - The background color expressed as an rgba value array to use for the image background. For example, use [255,0,0,255] for red. Defaults to an opaque light gray [240,240,240,255].
- saturation - The saturation of the derived foreground color as a value from 0-1. Defaults to 0.7.
- brightness - The brightness of the derived foreground color as a value from 0-1. Defaults to 0.5.

Usage

Simple

Generate the Identicon by supplying a hash string and size. Note: SVGs will produce clearer images (see below). To make PNGs crisper, you can try adding the CSS rule image-rendering: pixelated;


// create a base64 encoded PNG
var data = new Identicon('d3b07384d113edec49eaa6238ad5ff00', 420).toString();

// write to a data URI
document.write('<img width=420 height=420 src="https://github.com/stewartlord/identicon.js/raw/master/data:image/png;base64,' + data + '">');

Advanced

To customize additional properties, generate the Identicon by supplying a hexadecimal string and an options object.

// set up options
var hash = "c157a79031e1c40f85931829bc5fc552";  // 15+ hex chars
var options = {
      foreground: [0, 0, 0, 255],               // rgba black
      background: [255, 255, 255, 255],         // rgba white
      margin: 0.2,                              // 20% margin
      size: 420,                                // 420px square
      format: 'svg'                             // use SVG instead of PNG
    };

// create a base64 encoded SVG
var data = new Identicon(hash, options).toString();

// write to a data URI
document.write('<img width=420 height=420 src="https://github.com/stewartlord/identicon.js/raw/master/data:image/svg+xml;base64,' + data + '">');

PNG output requires PNGLib

stewartlord / identicon.js

readme