Field Guide № 04 Decoded · Annotated · Explorable

The Anatomy
of a QR Code.

A small black-and-white grid encodes a surprising amount of information — and survives surprising amounts of damage. This is a guided tour through the squares, the silences, and the math that lets your camera read a sticker on a lamppost.

Scroll to begin · Five interactive demonstrations · One generator at the end

§ 01 — A BRIEF HISTORY

Born on a factory floor.

In 1994, an engineer named Masahiro Hara was working at Denso Wave, a subsidiary of the Toyota Group, on a problem the auto industry had stopped pretending to solve: barcodes. A single one-dimensional barcode could hold maybe twenty digits. To track all the parts in a Toyota assembly line, workers were sticking ten barcodes on a single box and scanning them in sequence. It was, in the most Japanese sense of the word, mendokusai — a hassle.

Hara's team wanted a code that could hold more data, be read from any angle, and survive grease, scratches, and partial coverage. The legend goes that he was inspired during a lunch break game of Go, where the black-and-white stones on a grid suggested a kind of two-dimensional alphabet. The team's most clever invention wasn't the grid itself — it was the three big square "eyes" in the corners. Hara studied images and printed materials and chose the ratio of black to white in those squares (1:1:3:1:1) precisely because it was the rarest pattern in printed matter. A camera that finds it can lock on instantly, no matter the angle.

Denso Wave released the spec without enforcing royalties. That decision — more than the technology itself — is why a square that started life on a dashpanel assembly line now appears on tombstones, museum walls, ramen menus, and roughly half of all Tokyo storefronts.

1994
Denso Wave invents the QR code in Japan
1997
Adopted as automotive industry standard (AIM)
2000
ISO/IEC 18004 international standard
2002
First camera phones in Japan can read them
2017
iOS & Android add native QR scanning
2020
Pandemic menus & payments make QR universal
7,089
max numeric digits
4,296
max alphanumeric chars
2,953
max bytes
30%
recoverable damage
· · · § · · ·
§ 02 — STRUCTURE

The three eyes and everything else.

Look at any QR code. Three of its corners are dominated by big square targets. These are the finder patterns, and they are the reason a phone can detect a code at any rotation, in dim light, partly folded, or printed on a t-shirt photographed at an angle.

A finder pattern is three nested squares — 7 modules wide, 5 modules wide, 3 modules wide. Scanned along any line through the center, the ratio of dark to light to dark to light to dark is exactly 1:1:3:1:1. This ratio is statistically improbable in real-world imagery, which makes it a reliable beacon. The scanner finds three of these, draws an imaginary triangle between them, and now it knows the orientation, size, and perspective of the entire code.

The fourth corner contains a smaller alignment pattern (in larger codes, several of them) used to correct for warping. The thin double rows of alternating black-and-white modules running between the finders are timing patterns — they let the scanner count rows and columns. And the silence around the whole thing is the quiet zone: empty space the scanner needs to know where the code ends.

Demo 01 / Anatomy Highlighter Explorable Demo
Three nested squares in a 1:1:3:1:1 ratio. The scanner uses these to lock onto the code at any angle.
§ 03 — ENCODING

Picking the right alphabet.

QR codes don't store text the way a text editor does. Before encoding anything, the encoder picks a mode — a small dictionary tuned to the kind of data you have. A code holding only digits uses a denser scheme than one holding arbitrary bytes, fitting more information into the same number of squares.

The four common modes are numeric (digits only, 3 digits per 10 bits), alphanumeric (uppercase letters, digits, and a handful of symbols, 2 chars per 11 bits), byte (any 8-bit byte, including UTF-8 text), and kanji (a compact mode for Japanese characters, defined originally because the format was, after all, born in Nagoya). The same string of text can take dramatically different amounts of space depending on which mode applies — a phone number in numeric mode is half the size it would be in byte mode.

Demo 02 / Mode Comparison Explorable Demo
Bars below show how many bits each mode needs to encode the string above.
§ 04 — ERROR CORRECTION

Designed to be damaged.

Here is the part that feels like magic. Every QR code has spare information baked into it — redundant data computed using Reed–Solomon codes, a technique borrowed from CD audio and deep-space communications. This redundancy lets a scanner reconstruct the original message even if part of the code is missing.

You choose how much redundancy you want by picking an error correction level. Level L recovers from about 7% damage; M from 15%; Q from 25%; H from up to 30%. Higher levels mean the same data takes more modules — the code gets bigger — but it can survive more abuse. This is why people can paste their company logo on top of a QR code: the rest of the code carries enough redundancy to recover what the logo is covering.

Demo 03 / Damage Tolerance Click to damage
0%40%
Drag the slider — damage stays under 7% and the code is still readable. Push past it and the message is lost.
§ 05 — MASKING

The trick of the checkerboard.

A scanner reads a QR code by detecting contrast — the boundaries between dark and light modules. If a code happens to come out mostly black, or mostly white, or with long uniform runs, the scanner has trouble. So the spec includes a clever final step: masking.

After encoding, the encoder XORs the data region with one of eight predefined mask patterns — geometric grids that flip selected modules. The encoder tries all eight, scores each result for "readability" (penalizing things like long runs of the same color, large solid blocks, and a too-skewed black-to-white ratio), and picks the winner. The chosen mask number is stored in the format-info area near the finders, so the scanner knows which pattern to XOR back out.

"The mask doesn't change the data. It just rearranges its appearance to make the data easier to read."
Demo 04 / Mask Patterns 8 patterns
Mask 0: (row + col) mod 2 == 0 — a fine checkerboard.
§ 06 — THE PIPELINE

Putting it all together.

Watching a scanner decode a QR code, in slow motion, is the best way to understand what all those squares are doing. Here is the same code, broken into the stages a real scanner moves through in milliseconds.

Demo 05 / Decoder Walkthrough Step-by-step
Step 1. Scanner locates the three finder patterns (the corner squares) by looking for the 1:1:3:1:1 contrast ratio.
· · · § · · ·
§ 07 — THE STUDIO

Now make your own.

Everything you've seen above, in one customizable tool. Type your content, pick error correction, choose colors, module shapes, and eye styles — then download as PNG or SVG. The renderer is fully client-side; nothing leaves your browser.