Canvas-based Geometric Identicon Generator – Identicons.js

Preview:

Description:

Identicons.js is a Vanilla JavaScript library that makes use of Canvas API to generate geometric identicons based on a specific input seed.

Identicons are square or circular icon images, with strong visual branding, that provide a marked visual distinction between similar-looking users or accounts. This facilitates recognition even when the user’s name is not available – for example, when looking at a list of comments or forum posts – or when recipients are offline and thus unable to exchange names.

See Also:

• Identicon Generator With JavaScript And Canvas/SVG – Jdenticon
• SVG Identicon Generator In Vanilla JavaScript – Hexicon
• Generate Github-style Identicon Avatars With Squares – Squareicon

How to use it:

1. Download and import the identicons.bundled.min.js into the document.

<script src="/dist/identicons.bundled.min.js"></script>

2. Generate a basic identicon.

let result = Identicons.renderDiscs({
    "seed": "cssscript",
});
// => data:image/png;base64...
result.dataURL

3. More options.

let result = Identicons.renderDiscs({
    "seed": "cssscript",
    "base": null,
    "width": null,
    "height": null,
    "maxSize": null,
    "minSize": null,
    "minDiscs": 6,
    "maxDiscs": minDiscs*1.33,
    "colorRange": 10,
});

Changelog:

v0.1.2 (09/30/2023)

• Fix logging issue

v0.1.1 (01/28/2023)

• Fix grayscale having different positions