DEV Community

Praveen Kumar
Praveen Kumar

Posted on

How QR Code Works .....

#opensource #community

From Text to Black-and-White Squares

QR codes are everywhere today: payments, restaurant menus, login links, tickets, and product information. You simply point your camera at a square pattern and instantly get a website or some text.

But what’s actually happening behind the scenes?

How does a simple grid of black and white squares store text like https://example.com or HI or Payment Information ?

In this article we'll break down the full process step-by-step — from text → binary → grid → scanning → decoding.

1. What Is a QR Code?

A QR (Quick Response) code is a type of 2-dimensional barcode invented in 1994 by engineers at Denso Wave in Japan.

Unlike traditional barcodes that store information in one direction (lines), QR codes store information both horizontally and vertically.

This allows them to store much more data.

For example, a QR code can store:

  • URLs
  • text
  • WiFi credentials
  • contact cards
  • payment data
  • event tickets

2. QR Code Structure

A QR code is not random pixels. It has several structured components that help scanners detect and decode it.

1. Finder Patterns (Corner Squares)

These are the three big squares in the corners.

Their job is to help the scanner:

  • detect that the image is a QR code
  • determine orientation
  • locate the grid

They have a distinctive pattern:

Black
White
Black
White
Black
Enter fullscreen mode Exit fullscreen mode

This pattern has a ratio of 1:1:3:1:1, which scanners search for in camera images.

Sometimes people refer to them informally as:

  • Outer eye → the large outer black square
  • Inner eye → the smaller black square inside

These squares do not contain data.

2. Timing Patterns

Between the finder patterns are alternating modules:

█ ░ █ ░ █ ░ █
Enter fullscreen mode Exit fullscreen mode

These help scanners determine:

  • module size
  • spacing between grid cells

3. Alignment Pattern

Larger QR codes include smaller squares that help correct distortion if the QR code is:

  • curved
  • tilted
  • printed on uneven surfaces

4. Data Area

The remaining squares contain the actual encoded data.

Each small square is called a module.

Black module = 1
White module = 0
Enter fullscreen mode Exit fullscreen mode

3. Step 1 — Converting Text Into Binary

Before data can be placed in the QR code, it must be converted into binary.

Computers represent characters using encoding systems such as ASCII or UTF-8.

Example text:

HI
Enter fullscreen mode Exit fullscreen mode

ASCII values:

Character ASCII Binary
H 72 01001000
I 73 01001001

Binary stream:

0100100001001001
Enter fullscreen mode Exit fullscreen mode

This binary sequence is what will be stored inside the QR code.

4. Step 2 — Adding QR Metadata

Before storing the data, the QR generator adds extra information:

Mode indicator

Specifies the type of data:

  • numeric
  • alphanumeric
  • byte
  • kanji

Character count

How many characters are stored.

Error correction data

Extra redundancy so the QR code still works if damaged.

QR codes use Reed–Solomon error correction.

Four levels exist:

Level Recovery
L 7% damage
M 15% damage
Q 25% damage
H 30% damage

This is why QR codes still work even if part of them is scratched or covered by a logo.

5. Step 3 — QR Code Grid

QR codes come in 40 versions.

Each version defines the grid size.

Version Size
1 21 × 21
2 25 × 25
10 57 × 57
40 177 × 177

The smallest QR code (Version 1) is 21 × 21 modules.

Some modules are reserved for:

  • finder patterns
  • timing patterns
  • format information
  • alignment patterns

The remaining modules are used to store data.

6. Step 4 — Mapping Binary Into the Grid (Zig-Zag Pattern)

Data is not written left-to-right or top-to-bottom.

Instead, QR codes fill modules using a vertical zig-zag path.

The rules are:

  1. Start at the bottom-right corner
  2. Fill two columns at a time
  3. Move upwards
  4. When reaching the top, shift two columns left
  5. Move downwards
  6. Repeat

Visual idea:

↑
│
│
↓
│
│
↑
│
│
Enter fullscreen mode Exit fullscreen mode

Example simplified grid:

16 15
13 14
12 11
 9 10
 8  7
 5  6
 4  3
 1  2
Enter fullscreen mode Exit fullscreen mode

Each position gets the next bit from the binary stream.

1 → black
0 → white
Enter fullscreen mode Exit fullscreen mode

If the zig-zag path encounters reserved modules (finder patterns, timing lines), those cells are skipped.

7. Step 5 — Masking

After placing the data bits, the QR generator applies a mask pattern.

Masking prevents patterns that could confuse scanners (for example large blocks of black or white).

Example mask rule:

if (row + column) % 2 == 0
    flip bit
Enter fullscreen mode Exit fullscreen mode

There are 8 possible mask patterns.

The QR code stores which mask was used so the scanner can reverse it.

8. Final Result

After all steps:

Text
↓
Binary encoding
↓
Add metadata
↓
Add error correction
↓
Place bits in zig-zag path
↓
Apply mask
↓
QR code pattern
Enter fullscreen mode Exit fullscreen mode

This produces the final black-and-white square pattern.

9. How a Phone Scans a QR Code

When you scan a QR code with your camera, the process works roughly like this.

Step 1 — Detect finder patterns

The scanner searches the image for the 1:1:3:1:1 pattern.

If it finds three of them, it identifies a QR code.

Step 2 — Determine orientation

Because the three squares form an L shape, the scanner knows:

  • where the top is
  • whether the code is rotated

Step 3 — Correct rotation, skew, and perspective

In real life the QR code may appear distorted.

Examples:

Rotation:

QR code rotated sideways
Enter fullscreen mode Exit fullscreen mode

Skew:

QR looks like a parallelogram
Enter fullscreen mode Exit fullscreen mode

Perspective:

QR looks like a trapezoid
Enter fullscreen mode Exit fullscreen mode

Using the positions of the finder patterns, the scanner calculates a perspective transform that mathematically "unwarps" the QR code back into a perfect square grid.

Step 4 — Measure module size

Timing patterns help determine the spacing between modules.

Step 5 — Read modules

The scanner samples each module:

Black → 1
White → 0
Enter fullscreen mode Exit fullscreen mode

Step 6 — Reverse masking

The scanner removes the mask pattern.

Step 7 — Apply error correction

Reed-Solomon error correction reconstructs missing bits if part of the code is damaged.

Step 8 — Decode data

The binary stream is converted back into characters.

Example:

01001000 → H
01001001 → I
Enter fullscreen mode Exit fullscreen mode

Final result:

HI
Enter fullscreen mode Exit fullscreen mode

10. Why QR Codes Work So Reliably

QR codes are robust because they include:

  • strong pattern detection
  • perspective correction
  • error correction
  • masking to avoid visual confusion
  • distributed data layout

This allows them to be scanned even if they are:

  • partially damaged
  • rotated
  • tilted
  • printed on curved surfaces

Conclusion

A QR code might look like random squares, but it's actually a carefully designed system.

The entire process looks like this:

Text
→ Character encoding
→ Binary data
→ Error correction
→ Zig-zag data placement
→ Masking
→ QR grid
→ Camera detection
→ Perspective correction
→ Binary decoding
→ Original text
Enter fullscreen mode Exit fullscreen mode

Next time you scan a QR code, remember that your phone is performing image recognition, geometry correction, error recovery, and binary decoding — all in milliseconds.

Top comments (0)