06Mathematics · Algorithmsexplorer

Quiet ZoneInside a QR code

How does a QR code still scan when part of it is scratched, torn or covered by a logo?

Quiet Zone on a desktop screen
Quiet Zone on a phone

Summary

Encode, scratch and decode a QR code with an encoder and decoder written from scratch, and watch Reed–Solomon error correction repair the damage.

What you can do

  • Scratch, erase, tear, add a logo sticker or random noise; the decoder reruns on every pointer move.
  • Per-block error budgets show how close each Reed–Solomon block is to failing, and why it failed.
  • Hover any module to see its role, down to "data bit 3 of codeword 17 in block 2".
  • An eight-step story walks your own message from text to bits, codewords, interleaving, placement, masking and back.
  • Export the undamaged code as SVG or PNG; it scans with a phone.

How it works

Codewords live in the finite field GF(256). Each block gets n − k Reed–Solomon check codewords, the remainder of a polynomial division, so up to ⌊(n − k)/2⌋ wrong codewords per block can be located and fixed: syndromes, Berlekamp–Massey for the error locator, Chien search for positions and Forney for magnitudes. Format and version information use BCH codes; the eight masks are scored with the standard’s four penalty rules.

The hard part

Writing the whole pipeline from scratch — encoder for all 40 versions and 4 levels, and a decoder with error and erasure correction — and making it fast enough to rerun on every pointer move, while keeping damage anchored to the symbol when the text (and therefore the version) changes.

Validation

HELLO WORLD 1-Q codewords, mask and format
13 + 13 exact; mask 6, penalty 314
Spec tables (blocks, capacities, alignment, format, version)
all rows match
Reed–Solomon, correctable random patterns
10 000 / 10 000 corrected
Beyond capacity (t+1 … t+5 errors)
10 000 / 10 000 flagged, 0 miscorrections
Our codes read by jsQR, all 40 versions
2 000 / 2 000
qrcode (npm) codes read by our decoder
2 000 / 2 000

Built with

  • TypeScript
  • Svelte
  • SVG
  • KaTeX

Skills it demonstrates

  • Finite fields
  • Error-correcting codes
  • Information design