How does a tiny grid hold an entire URL?

From bytes and RS checks to function patterns, zigzag placement, eight masks, and format information: generate a real QR Code containing https://vistep.ai.

2:57 filmSuggested ages 12+

The interactive experiment needs a supported browser.

Preparing the experiment…

0:00Follow one v from the URL
Start with this URL and follow one of its letters into a QR code. The letter is represented by eight bits. We choose the highlighted bit. The full picture is not ready yet, but every later step keeps tracking this same bit rather than switching to an unrelated square.
0:22Tell the reader how to read
The reader needs to know the encoding method and the message length. Then comes the URL itself, followed by the required padding. The picture separates these parts so you can distinguish message content from information that helps the machine read it.
0:44Calculate seven check codewords
Next, calculate checking information from the data. As data enters, the results below change. They record relationships across the block rather than copying a letter again. These relationships can help deal with some errors later, but their correcting ability has limits.
1:06Reserve orientation and scale
Do not fill the grid with message bits yet: some areas have other jobs. Three large corner patterns help locate and orient it. Alternating cells help identify the grid, and reading instructions need space too. Reserve these areas first; the message and checking information use the remaining cells.
1:28Place bits in pairs of columns
Now place the bits along the specified route. It turns up and down and skips reserved function areas. The gold frame shows the current position. Our tracked bit reaches its own cell; a turn in the route does not change which bit we are following.
1:50Compare all eight masks
Printing the raw placement can create an awkward pattern. The encoder tries several reversible flip rules and chooses a suitable pattern. Our original bit of one becomes a white square after a flip. This helps reading rather than hiding the message. Knowing the rule lets the reader restore the bit.
2:12Write the reading guide twice
How does the reader know which rule was chosen? Look beside the corner patterns. Two strips carry the same reading instructions. The picture highlights them in turn. The message, its checking information and these instructions have different jobs. Not every square is a bit of the URL itself.
2:34Now it can be scanned
The reader follows the instructions and undoes the flips to recover the information. Remove the colours and teaching marks to reveal the black-and-white code, with clear space around it. Scanning reads the URL; opening it is the scanner's choice. Checking information cannot guarantee recovery from arbitrary covering, and this film does not decode a damaged image.

How does a phone read black and white squares?

A scanner first locates the square and its orientation, then reads it by shared rules. Three large corner patterns help it find its place. Smaller squares store the message and checking information.

Follow one letter from the URL as it becomes bits and enters the grid. Before printing, a reversible rule flips some squares to make the pattern easier to read.

So black does not always mean an original message bit of 1, nor white a 0. The reader undoes those flips. Checking information helps with some damage, but cannot repair every amount or arrangement of damage.

Encode your own text

Enter a short message and generate a code. Shorten it if the capacity warning appears.
Change the mask. Does the stored text change along with the pattern?
Track a bit, then turn teaching marks off before scanning. Compare the text that is read.

From codewords to modules

Further controls and numerical checks

In exploration, enter vistep.ai and open the calculation details. Compare it with the film’s full URL: the shorter message needs alternating EC, 11 padding codewords.
Choose masks 0 through 7 manually. The text stays the same while the module pattern, format information, and penalty are recalculated together.
Turn on the bit tracker and select a byte and bit. Inspect its original, mask, and printed values alongside its module coordinates. Teaching outlines can affect scanning; turn tracking off before scanning or download the SVG, which always omits highlights.
Try 你好. The calculation shows UTF-8 bytes and an ECI declaration: character count is not byte count. Invalid input removes the old QR Code so it cannot be mistaken for the new text.
Reset restores the URL, automatic masking, byte nine, bit b6, and tracking off. Buttons and selects support keyboards. Playback, seeking, and replay use the shared film controls.

The supported scope is 1–17 ASCII bytes. Text containing non-ASCII characters uses UTF-8 with explicit ECI 26 and fits up to 16 bytes. Empty messages, other versions and correction levels, numeric or alphanumeric optimization, and multiple message segments are outside this scene’s scope. This is a real encoder with deliberately bounded coverage.

Want to check the technical details?

To scan a QR code, a phone first finds the grid and its orientation, then reads it by agreed rules. Three large corner patterns help it locate the code. Smaller squares hold message and check information. A black square does not always mean an original message bit of 1: a reversible mask flips some squares.

A QR Code follows a precise encoding process. This scene starts with the real URL https://vistep.ai and generates a scannable QR Code Model 2, Version 1, level L, in byte mode: a 21 × 21 grid of modules.

Follow the ninth byte, v: decimal 118, or 01110110. Its second bit from the left, b6, starts as 1. Placement brings that bit to (13, 11), counting from zero at the top left of the symbol, excluding the quiet zone. The selected mask is number 3, whose value there is also 1. The printed module is white:

Original bit 1 ⊕ mask bit 1 = printed bit 0

Applying the same exclusive-or operation recovers the original bit. Masking improves patterns for machine reading; it is not encryption. All eight masks preserve the same message. The encoder penalizes long runs, solid squares, finder-like patterns, and dark–light imbalance, then chooses the lowest-scoring complete candidate. This URL selects mask 3 with a penalty of 1087.

Why do 17 bytes become 19 data codewords?

Byte mode begins with 0100. In Version 1, the byte-count field occupies 8 bits. The URL contributes 17 × 8 = 136 bits, followed by four terminating zeros, filling the 152-bit capacity exactly.

4 + 8 + 136 + 4 = 152 bits = 19 data codewords

A codeword is a regrouped eight-bit unit. Because the message follows a 12-bit header, an original byte can cross a codeword boundary; byte and codeword indices are not interchangeable. A shorter message is aligned to an eight-bit boundary, then padded with alternating hexadecimal EC and 11. Non-ASCII input first adds mode 0111 and the eight-bit ECI assignment 26, making its complete header 24 bits.

How are the seven RS checks calculated?

This version and level use one error-correction block: 19 data codewords followed by 7 Reed–Solomon check codewords, with no multi-block interleaving. Arithmetic takes place in GF(256). Addition is exclusive-or; multiplication reduces by the irreducible polynomial:

p(x) = x⁸ + x⁴ + x³ + x² + 1, hexadecimal 0x11D

Set α = 2. The generator polynomial multiplies seven factors (x + αⁱ), with i running from 0 through 6. Its coefficients are 01 7F 7A 9A A4 0B 44 75. Multiply the data polynomial by x⁷ and divide by the generator: the seven-byte remainder becomes the check codewords. The URL produces D2 B9 37 2B E9 51 39. Each animated step shows the actual remainder for the data prefix processed so far.

This differs from the bitwise Hamming checks in the related error-correction scene. RS operates on eight-bit codewords. Given correctly acquired codewords and block structure, seven checks support correction of up to three erroneous codewords at unknown locations. Locating the symbol, sampling it, and reading its format must also succeed. Covered area does not translate directly into guaranteed recovery. This scene has no damaged-image decoder and makes no logo-placement or damage-recovery demonstration.

Which modules are reserved?

Three finder patterns, their white separators, two timing patterns, two format copies, and one fixed dark module occupy 233 positions. The remaining 208 hold exactly 26 × 8 data and check bits. Version 1 has neither alignment patterns nor a separate version-information area.

Placement starts at the bottom right, moving in alternating upward and downward pairs of columns and skipping function modules. Masks affect only data and RS check modules. The level-L indicator 01 and three-bit mask number form five bits. BCH arithmetic uses generator 0x537; a final exclusive-or with 0x5412 produces the fifteen-bit format word, written twice in reserved positions. The default format word is 0x789D.

Scanning conditions and sources

Both the finished code and downloaded SVG preserve a four-module white quiet zone around all four edges, with dark modules on white. Colored outlines and incomplete patterns belong to the teaching sequence. The final chapter removes these highlights and presents the real result. Scanning yields the text https://vistep.ai; reader software decides which action to offer.

Fixed-mask matrices were compared with Project Nayuki’s independent encoder, and clean outputs were decoded using ZXing. These checks establish evidence for a finite test set, not a guarantee for every camera, reflection, damage pattern, or printing size.

Sources: DENSO WAVE: versions and capacity, DENSO WAVE: the four-module margin, DENSO WAVE: error correction, Project Nayuki: QR generator and implementation notes, and ZXing: UTF-8 ECI assignment.

How does a phone read black and white squares?

Encode your own text

From codewords to modules

Further reading & sources

Where will your curiosity go next?