hashicon

hashicon for the cryptoniacs


Keywords
hash, icon, avatar, identicon, generate, generator, visual, canvas, ethereum classic, crypto, ethereum, ethereum-classic
License
Apache-2.0
Install
npm install hashicon@0.3.0

Documentation

GitHub tag npm License

Hashicon

Generates a beautiful representation of any hash.

Check out the demo website to try it out with your own hash and to see some examples.

Further examples here.

Sample hashicon image

Browser

Install with:

$ npm install hashicon --save

Or, include the CDN:

<script src="//unpkg.com/hashicon"></script>

Or, download the current build.

Usage

The hash value can include or omit the 0x prefix.

const hash = "0xdc53525847b67a9e32d80066202d5744c86ae500";

Create a hashicon with default params:

const icon = hashicon(hash); // icon is a <canvas> element
const icon = hashicon(hash, 80);  // size 80px

Or, pass custom params:

const params = {...};
const icon = hashicon(hash, params);

Finally, append the newly created hashicon to the HTML document:

document.body.appendChild(icon);

Params

See default params

HashIcon's values are extracted from the hash, and controlled with the following parameters to manipulate the possible visual output:

{

// size px (HiDPI/Retina aware)
size: 100,

// primary color range radius ( 0=red, 60=yellow, 120=green, ..., 360=red )
hue: { min: 0, max: 360 },

// saturation ( 0=grey, 100=colorfull )
saturation: { min: 70, max: 100 },

// lightness ( 0=extremlydark, 50=optimal, 100=extremlybright )
lightness: { min: 45, max: 65 },

// hue variation for individual triangles
variation: { min: 7, max: 14, enabled: true },

// color shift from primary hue to secondary hue ( the pattern )
shift: { min: 60, max: 300 },

// the pattern opacity
figurealpha: { min: .7, max: 1.2 }, // alpha

// simulate a 3d cube by different areas gets some more/less light applyed 
light:{ top:10, right:-8, left:-4, enabled: true},

// Allows a custom canvas to be used to render into
createCanvas: (width, height) => HTMLCanvasElement

}

Node

See examples/nodejs:

$ cd examples/nodejs
$ npm install
$ node index

This will build both PNG and HTML files into output directory.

Or, manually try with:

$ npm install hashicon canvas

Run with:

import hashicon from 'hashicon'
import { createCanvas } from 'canvas'
const icon = hashicon('0xdc53525847b67a9e32d80066202d5744c86ae500', { createCanvas })
const url = icon.toDataURL()
console.log(url)

See ESM+CJS builds here.

Development

  1. Install package dependencies locally:
$ npm install
  1. Start development environment:
$ npm run dev
  1. Open http://localhost:3000

Changes are built in "dev" folder with sourcemaps and are live-reloaded.

Build

$ npm run build

Builds package into dist/ folder.

License

See LICENSE