Identicons

A javascript library for generating identicon images based on an input seed.

DISCLAIMER: Developed for browser context because it depends on canvas to render images.

Example Identicons

Discs

Default (color range 10%)

| | | | | | | | | | | | |------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------| | | | | | | | | | | | |

Controlled color base (same seed)

| 0.0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1.0 | |------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------| | | | | | | | | | | | |

Controlled color base (random seed)

| 0.0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1.0 | |------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------|------------------------------------------| | | | | | | | | | | | |

Controlled color base (increased color range to 30%)

| 0.0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1.0 | |----------------------------------------------|----------------------------------------------|----------------------------------------------|----------------------------------------------|----------------------------------------------|----------------------------------------------|----------------------------------------------|----------------------------------------------|----------------------------------------------|----------------------------------------------|----------------------------------------------| | | | | | | | | | | | |

Controlled color base (100% any color range)

| 0.0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1.0 | |-----------------------------------------------|-----------------------------------------------|-----------------------------------------------|-----------------------------------------------|-----------------------------------------------|-----------------------------------------------|-----------------------------------------------|-----------------------------------------------|-----------------------------------------------|-----------------------------------------------|-----------------------------------------------| | | | | | | | | | | | |

Size controls

Using the seed hello world, the

• colors
• number of discs
• realtive disc sizes
• relative disc positions

will be consitent for any size image.

| Square | Rectangle | |----------------------------------|-------------------------------------| | | |

| Banner | |----------------------------------| | |

Usage

<script type="text/javascript" src="dist/identicons.bundled.js"></script>

let result = Identicons.renderDiscs({
    "seed": "hello world",
});

result.dataURL
// data:image/png;base64,iVBORw0KGgoAAAAN...AABJRU5ErkJggg==