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.
Install with:
$ npm install hashicon --saveOr, include the CDN:
<script src="//unpkg.com/hashicon"></script>Or, download the current build.
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 80pxOr, pass custom params:
const params = {...};
const icon = hashicon(hash, params);Finally, append the newly created hashicon to the HTML document:
document.body.appendChild(icon);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
}See examples/nodejs:
$ cd examples/nodejs
$ npm install
$ node indexThis will build both PNG and HTML files into output directory.
Or, manually try with:
$ npm install hashicon canvasRun 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.
- Install package dependencies locally:
$ npm install- Start development environment:
$ npm run devChanges are built in "dev" folder with sourcemaps and are live-reloaded.
$ npm run buildBuilds package into
dist/folder.
See LICENSE
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent