Identicon Generator With JavaScript And Canvas/SVG – Jdenticon

Author: dmester
Views Total: 0 views
Official Page: Go to website
Last Update: August 2, 2020
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 both browser and node.js. Ideal for generating unique avatars as you see on Github.

How to use it:

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

<script src=""></script>

2. 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>

3. 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>

4. 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 

// jQuery wrapper

// update configs
// or
window.jdenticon_config = { };

5. All configurations.

  // Limits the possible hues in generated icons
  // The hues are specified as an array of hues in degrees.
  hues: null,
  // The lightness range of colored/grayscal shapes of an icon.
  lightness: {
    color: [0.4, 0.8],
    grayscale: [0.3, 0.9]
  // Specifies the saturation of the originally colored/grayscale shapes of an icon.
  saturation: {
    color: 0.5,
    grayscale: 0.0
  // Background color
  backColor "#000000",
  // Padding
  padding 0.08,
  // "never" – icons are never rendered automatically. You need to call jdenticon.update() manually to render identicons.
  // "once" – icons are rendered once the page has loaded. Any dynamically inserted or modified icons will not be rendered unless jdenticon.update() is manually called.
  // "observe" – icons are rendered upon page load, and the DOM is monitored for new icons using a MutationObserver. Use this if icons are inserted dynamically, e.g. by using Angular, React or VanillaJS. This option behaves as "once" in IE<11.
  replaceMode: "once"


v3.0.0 (08/02/2020)

  • New methods updateSvg() and updateCanvas(). These only contain references to the logics needed for each element type, providing better code optimization opportunities. They are now preferred over update() where the element type is known.
  • An ES bundle is now provided. Just import the “jdenticon” package and the bundler will choose the ES bundle when possible. This will improve code optimizations hopefully causing smaller builds.
  • configure() is a new method for providing a default style configuration. This plays nicer when imported as an ES module, than the old config property, which was made read-only by the ES import statement.
  • jdenticon.config is deprecated. Use the global jdenticon_config variable or jdenticon.configure() method instead.
  • Bugfixes

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.

Source link

Add comment



All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.