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.

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 be any kind of string.

const hash = "0xdc53525847b67a9e32d80066202d5744c86ae500"; // hash ( e.g. etc adress )
const hash = "1F1tAaz5x1HUXrCNLbtMDqcw5o5GNn4xqX"; // hash ( e.g. btc adress )
const hash = "BlueSky23"; // string ( e.g. a username )

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}
}

Node

TODO: node-canvas example

Install with:

$ npm install hashicon

See ESM+CJS builds here.

Development

1. Install package dependencies locally:

$ npm install

2. Start development environment:

$ npm run dev

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