{"id":28708362,"url":"https://github.com/bpierre/blo","last_synced_at":"2025-10-08T23:59:05.167Z","repository":{"id":195788779,"uuid":"692920695","full_name":"bpierre/blo","owner":"bpierre","description":"👾 Fast + sharp Ethereum identicons (\"blockies\").","archived":false,"fork":false,"pushed_at":"2025-04-06T15:18:52.000Z","size":419,"stargazers_count":98,"open_issues_count":0,"forks_count":9,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-06-04T08:40:55.939Z","etag":null,"topics":["blockies","ethereum","identicon"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bpierre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-09-18T01:07:56.000Z","updated_at":"2025-05-06T14:41:00.000Z","dependencies_parsed_at":"2023-11-19T20:25:43.342Z","dependency_job_id":"ae95650f-509d-44ad-8dd7-6ad5bd475987","html_url":"https://github.com/bpierre/blo","commit_stats":{"total_commits":32,"total_committers":3,"mean_commits":"10.666666666666666","dds":0.0625,"last_synced_commit":"9d48f955d04a4c52acd402c3b9d2e572899497d5"},"previous_names":["bpierre/blo"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/bpierre/blo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fblo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fblo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fblo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fblo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bpierre","download_url":"https://codeload.github.com/bpierre/blo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fblo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259860438,"owners_count":22922990,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blockies","ethereum","identicon"],"created_at":"2025-06-14T18:11:10.780Z","updated_at":"2025-10-08T23:59:00.137Z","avatar_url":"https://github.com/bpierre.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg width=\"860\" alt=\"blo\" src=\"https://github.com/bpierre/blo/assets/36158/7ddc0bf0-076d-4c5a-8624-cc8646e4c5aa\"\u003e\n  \u003cbr\u003e\u003cstrong\u003eblo\u003c/strong\u003e is a small and fast library to generate Ethereum identicons.\n  \u003cbr\u003e\u003cbr\u003e\n\u003c/div\u003e\n\n\u003cp align=center\u003e\u003ca href=\"https://www.npmjs.com/package/blo\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/blo?colorB=007ec6\" alt=\"npm version\"\u003e\u003c/a\u003e \u003ca href=\"https://bundlejs.com/?q=blo\"\u003e\u003cimg src=\"https://deno.bundlejs.com/badge?q=blo\" alt=\"Bundle size\"\u003e\u003c/a\u003e \u003ca href=\"https://github.com/bpierre/blo/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/blo?colorB=007ec6\" alt=\"License: MIT\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n## Features\n\n- 🐥 **Small**: **[0.7 kB](https://bundlejs.com/?bundle\u0026q=blo)** gzipped, even less with tree shaking.\n- 💥 **Fast**: **[more than 5x faster](#benchmark)** than the second fastest solution.\n- 🔍 **Optimized**: Leverages SVG to generate compact and sharp images at any size.\n- 💆 **Simple**: Focuses on Ethereum identicons only, allowing for a simpler API.\n- 🗂 **Typed**: Ships with [TypeScript definitions](#types).\n- 👫 **Universal**: Compatible with browsers, [Bun](https://bun.sh/), and [Node.js](http://nodejs.org/).\n- ☁️ **Standalone**: Zero dependencies.\n\n## Library Comparison\n\n| Library                               | Operations/sec[^1] | Size                                                                                                       | Types                                        | Environment[^2]                                | Rendering |\n| ------------------------------------- | -----------------: | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------- | --------: |\n| \u003cb\u003eblo\u003c/b\u003e                            |         💥 403,226 | [![](https://img.shields.io/badge/0.70kB-6ead0a)](https://bundlejs.com/?bundle\u0026q=blo)                      | ![](https://img.shields.io/badge/yes-6ead0a) | ![](https://img.shields.io/badge/all-6ead0a)   |       SVG |\n| \u003cnobr\u003eethereum-blockies-base64\u003c/nobr\u003e |              2,191 | [![](https://img.shields.io/badge/2.75kB-ee4433)](https://bundlejs.com/?bundle\u0026q=ethereum-blockies-base64) | ![](https://img.shields.io/badge/no-ee4433)  | ![](https://img.shields.io/badge/all-6ead0a)   |       PNG |\n| \u003cnobr\u003eblockies-react-svg\u003c/nobr\u003e       |             76,628 | [![](https://img.shields.io/badge/4.00kB-ee4433)](https://bundlejs.com/?bundle\u0026q=blockies-react-svg)       | ![](https://img.shields.io/badge/yes-6ead0a) | ![](https://img.shields.io/badge/react-ee4433) |       SVG |\n| \u003cnobr\u003e@download/blockies\u003c/nobr\u003e       |                112 | [![](https://img.shields.io/badge/0.67kB-6ead0a)](https://bundlejs.com/?bundle\u0026q=%6ead0a%2Fblockies)       | ![](https://img.shields.io/badge/no-ee4433)  | ![](https://img.shields.io/badge/dom-ee4433)   |    Canvas |\n| \u003cnobr\u003eblockies-ts\u003c/nobr\u003e              |                137 | [![](https://img.shields.io/badge/1.31kB-6ead0a)](https://bundlejs.com/?bundle\u0026q=blockies-ts)              | ![](https://img.shields.io/badge/yes-6ead0a) | ![](https://img.shields.io/badge/dom-ee4433)   |    Canvas |\n| \u003cnobr\u003ereact-blockies\u003c/nobr\u003e           |              4,693 | [![](https://img.shields.io/badge/4.72kB-ee4433)](https://bundlejs.com/?bundle\u0026q=react-blockies)           | ![](https://img.shields.io/badge/no-ee4433)  | ![](https://img.shields.io/badge/react-ee4433) |    Canvas |\n\n[^1]: These numbers are based on the [#benchmark](#benchmark) results (higher is better).\n[^2]: The term “all” refers to libraries that are framework agnostic and that run in browsers, Bun and Node.js.\n\n## Getting Started\n\n```sh\nnpm i -S blo\npnpm add blo\nyarn add blo\n```\n\n```ts\nimport { blo } from \"blo\";\n\nimg.src = blo(\"0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045\");\n```\n\n### React / Vue / Others\n\nblo is fast enough to not require memoization or async rendering for common use cases.\n\n```tsx\nfunction AddressIcon({ address }: { address: `0x${string}` }) {\n  return (\n    \u003cimg\n      alt={address}\n      src={blo(address)}\n    /\u003e\n  );\n}\n```\n\n## API\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003eblo(address: Address, size = 64): string\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nGet a data URI string representing the identicon as an SVG image.\n\nThe `size` paramater shouldn’t usually be needed, as the image will stay sharp no matter what the size of the `img` element is.\n\nExample:\n\n```ts\nimport { blo } from \"blo\";\n\nimg.src = blo(address); // size inside the SVG defaults to 64px\nimg2.src = blo(address, 24); // set it to 24px\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003ebloSvg(address: Address, size = 64): string\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nSame as above except it returns the SVG code instead of a data URI string.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003ebloImage(address: Address): BloImage\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nGet a `BloImage` data structure that can be used to render the image in different formats.\n\nCheck the [Bun](./demos/bun/index.ts) and [Node](./demos/node/index.js) demos to see usage examples.\n\n\u003c/details\u003e\n\n## Types\n\nThe library ships with TypeScript types included.\n\n```ts\n// BloImage contains the data needed to render an icon.\nexport type BloImage = [BloImageData, Palette];\n\n// 4x8 grid of the image left side, as 32 PaletteIndex items.\n// The right side is omitted as it's a mirror of the left side.\nexport type BloImageData = Uint8Array;\n\n// Colors used by a given icon.\nexport type Palette = [\n  Hsl, // background\n  Hsl, // color\n  Hsl, // spot\n];\n\n// Points to one of the three Palette colors.\nexport type PaletteIndex =\n  | 0 // background\n  | 1 // color\n  | 2; // spot\n\n// A color in the HSL color space.\n// [0]: 0-360 (hue)\n// [1]: 0-100 (saturation)\n// [2]: 0-100 (lightness)\nexport type Hsl = Uint16Array;\n\n// An Ethereum address.\nexport type Address = `0x${string}`;\n```\n\n## Acknowledgements\n\n- blo is a modernized version of [ethereum-blockies-base64](https://github.com/MyCryptoHQ/ethereum-blockies-base64), which I think was based on [ethereum/blockies](https://github.com/ethereum/blockies).\n- This README style was heavily inspired by [colord](https://github.com/omgovich/colord).\n- The visual was made in collaboration with [@dizzypaty](https://twitter.com/dizzypaty) 💖.\n\n## FAQ\n\n### Does it follow the exact same algorithm as Etherscan, MetaMask and others?\n\nYes.\n\n### Does it work with ENS names?\n\nNo it only works with Ethereum addresses, but you can resolve the ENS name to an address (e.g. with [wagmi](https://wagmi.sh/core/actions/fetchEnsAddress)) and pass the result to blo.\n\n### Can blo render other formats than SVG?\n\nYou can render to any format you want by using the `bloImage()` function, which returns a data structure (see [API](#api) above). Check out the [Bun](./demos/bun) and [Node](./demos/node) demos for examples of rendering an identicon in the terminal.\n\n\u003cimg width=\"400\" src=\"https://github.com/bpierre/blo/assets/36158/a7c86d01-f003-49d7-8f9e-93097b502872\" alt=\"Ethereum identicon rendered in the terminal\"\u003e\n\n### Can it be used to generate other types of identicons?\n\nblo only focuses on the Ethereum identicons algorithm but you can use it with any data, just prefix it with `0x` to fulfill the expected `Address` type if you are using TypeScript.\n\n### Why is it named blo?\n\nblo is short for blockies, which is the name of [the original library](https://github.com/ethereum/blockies) it is based on.\n\n## Benchmark\n\nThis benchmark attempts to use the fastest possible way to generate a data URI representing an Ethereum identicon, for each of the libraries compared.\n\n```\n$ bun benchmark\n\nclk: ~2.39 GHz\ncpu: AMD Ryzen 7 PRO 7840U w/ Radeon 780M Graphics\nruntime: bun 1.2.5 (x64-linux)\n\nbenchmark                   avg (min … max) p75 / p99    (min … top 1%)\n------------------------------------------- -------------------------------\nblo                            2.48 µs/iter   2.55 µs   3.13 µs ▅▆█▃▃▂▁▁▁▁▁\n@download/blockies             8.95 ms/iter   9.17 ms  10.63 ms █▇▃▄▂▂▂▂▂▁▁\nblockies-react-svg            13.05 µs/iter  14.39 µs  14.53 µs █▃▆▁▁▁▁▁▁▃▃\nblockies-ts                    7.28 ms/iter   7.41 ms   8.48 ms █▆▂▂▁▂▂▃▁▁▁\nethereum-blockies-base64     456.49 µs/iter 501.59 µs 882.05 µs ▆█▄▄▂▃▂▂▁▁▁\nreact-blockies               213.03 µs/iter 220.64 µs 268.34 µs ▁▃▆██▆▃▂▂▁▁\n\nsummary\n  blo\n   5.26x faster than blockies-react-svg\n   85.78x faster than react-blockies\n   183.82x faster than ethereum-blockies-base64\n   2929.86x faster than blockies-ts\n   3603.5x faster than @download/blockies\n```\n\nSee [./benchmark](./benchmark) for the benchmark code.\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpierre%2Fblo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbpierre%2Fblo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpierre%2Fblo/lists"}