Identicon Generator With JavaScript And Canvas/SVG – Jdenticon

Category: Image , Javascript | July 14, 2019
Author: dmester
Views Total: 1,392
Official Page: Go to website
Last Update: July 14, 2019
License: MIT


Identicon Generator With JavaScript And Canvas/SVG – Jdenticon


Jdenticon is a JavaScript library for dynamically generating identicon avatars from user provided values using HTML5 canvas or SVG.

Works with browser and node.js. Ideal for generating unique avatars as you see on Github.

How to use it:

Load the compiled and minified version of the Jdenticon library in the document.

<script src="/path/to/jdenticon.min.js"></script>

Create a canvas or SVG based placeholder for the identicon and specify the value (typically username) in the ‘data-jdenticon-value’ attribute as these:

<canvas width="64" height="64" data-jdenticon-value="cssscript"></canvas>
<svg width="64" height="64" data-jdenticon-value="cssscript"></svg>

The library also supports hash values which can be specified in the ‘data-jdenticon-hash’ attribute

<canvas width="64" height="64" data-jdenticon-hash="hash-value-here"></canvas>
<svg width="64" height="64" data-jdenticon-hash="hash-value-here"></svg>

API methods available.

// updates all identicon avatars

// renders an indenticon avatar

// render as a PNG image
// NOT available in the browser.

// render as a SVG image 
Method  jdenticon.toSvg()

// jQuery wrapper


v2.2.0 (07/14/2019)

  • TypeScript typings are now bundled in NPM package.
  • New configuration property padding.
  • The padding parameter of API methods has been replaced with a config parameter. For backward compatibility a padding value is still allowed as value to the config parameter.
  • Added CLI tool.
  • jdenticon.drawIcon is now also available on Node for usage with canvas compatible packages.
  • Updated universal module definition.

You Might Be Interested In:

Leave a Reply