SVG Identicon Generator In Vanilla JavaScript – Hexicon

Yet another JavaScript library that generates customizable identicon avatars in hexagon, square, and concentration styles.

See Also:

• Identicon Generator With JavaScript And Canvas/SVG – Jdenticon
• Canvas-based Geometric Identicon Generator – Identicons.js
• Generate Github-style Identicon Avatars With Squares – Squareicon

How to use it:

1. Download and import the Hexicon.js.

<script src="./build/hexicon.min.js"></script>

2. Create a new identicon avatar.

let hexicon = new Hexicon({
    // hexagon, square, or concentration
    type: 'square',
    // generate an identicon from the string you specify
    // leave empty to generate a random indenticon
    random: {
      string: 'CSSScript'
    }
});
// convert identicon data into SVG
let html = hexicon.toSVG();

3. Available options to customize the identicon avatar.

let hexicon = new Hexicon({
    // hexagon, square, or concentration
    type: 'square',
    // icon size
    size: 512,
    // background color
    background: '#fff',
    // normal, dark, light, or a fixed html color
    color: 'normal',
    // minimum proportion of the tiles
    minimum: 0.0,
    // number of rows and columns.
    level: 5,
    // if the shape is vertically symmetrical
    // only avaiable when the type is square or concentration
    symmetrical: true,
    // if true, changes the orientation of the shape
    // only avaiable when the type is hexagon or concentration
    rotated: false,
    // sides of the polygons
    // only avaiable when the type is concentration
    sides: 6,
    // if true, always shows the tiles on the outermost layer
    bordered: false,
    // leave empty to generate a random indenticon
    random: {
      string: 'CSSScript',
      bytes: [0x66, 0x6f, 0x6f, 0x62, 0x61, 0x72],
      hex: '666F6F626172',
      seed: 249808880,
    }
    
});