ShapeAddress

ShapeAddress 0.3.0 · an identicon that decodes

Every byte becomes a cell. The picture reads back to the address.

A wallet address is 20 bytes. ShapeAddress draws each one as a cell: a colour and a glyph from a fixed dictionary. Nothing is hashed away. A machine decodes the picture. A person reads it aloud.

Get startedOpen the playground
16 px
32 px
64 px

vitalik.eth · 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045

What you get

Lossless

20 bytes in, 20 cells out. decode(svg) returns the exact address. There is no hash, so there are no collisions to design around.

Readable at every size

One SVG. At 16 px it is a colour pattern that already carries 60 bits. At 48 px the shapes appear. From 128 px a person can read every cell.

A spoken form

Each cell has a name: colour plus glyph. Read the picture over a phone and the other side can type the address.

The address above, said aloud in reading order:

The lookalike proof

Address poisoning sends from an address that matches the first and last characters of a real one. The lookalike below shares the first 8 and last 5 hex characters with vitalik.eth. Jazzicon, MetaMask's Maskicon and Reown AppKit draw both identically. ShapeAddress differs in 14 of 20 cells, outlined here.

The proof is the format, not a tuning: two addresses that differ in one byte differ in one cell, always.

Install

Script tag

One file, no dependencies, global shapeaddress.

<script src="https://cdn.jsdelivr.net/npm/@shapeaddress/core@0.3.0/dist/shapeaddress.min.js"></script>
<script>
  el.innerHTML = shapeaddress('0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045', { size: 64 });
</script>
Browser setup

npm

ESM and CommonJS, TypeScript types included.

npm i @shapeaddress/core

import shapeaddress from '@shapeaddress/core';
const svg = shapeaddress('0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045');
shapeaddress.decode(svg).hex;  // 'd8da6bf2…6045'
npm, Node, React, web component

HTTP API

No code. Cached for a year, open CORS.

<img src="https://shapeaddress.com/v1/0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045.svg?size=64"
     width="64" alt="">
Routes, parameters, self-hosting

Go further

Use it

  • Get started: browser, npm, Node.js, React, web component, HTTP API, other languages.
  • JavaScript API: every function, option and error.
  • Playground: any address, every size, the matching code.

Understand it