Package Exports

hashicon

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hashicon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Install package dependencies locally:

$ npm install

Start development environment:

$ npm run dev

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