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:
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 = ; // icon is a <canvas> elementconst icon = ; // size 80px
Or, pass custom params:
const params = ...;const icon = ;
Finally, append the newly created hashicon
to the HTML document:
documentbody;
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 trianglesvariation: min: 7 max: 14 enabled: true // color shift from primary hue to secondary hue ( the pattern )shift: min: 60 max: 300 // the pattern opacityfigurealpha: min: 7 max: 12 // 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 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:
const icon = const url = iconconsole
See ESM+CJS builds here.
Development
- Install package dependencies locally:
$ npm install
- Start development environment:
$ npm run dev
Changes are built in "dev" folder with sourcemaps and are live-reloaded.
Build
$ npm run build
Builds package into
dist/
folder.
License
See LICENSE