4 Nov 2026
This page illustrates how a string of text can be encoded into a 2D matrix code, specifically into a Quick response code. QR codes can these days be found in many places, like on transit signs or billboard posters. They were originally invented by Masahiro Hara for his company in 1994 for use in manufacturing. The method shown here illustrates a possible algorithm, but real software for this purpose may work differently.
The first step in this process is rather simple, the text needs to be converted into a bit stream, which is animated above. On the left we see the url of this page and on the right each character is translated into 8 bits.
Every QR code contains error correction bits, which as the name suggests help in case of reading errors or damaged stickers. We will not go into the error correction coding here, but the dark red bits are such error correction bits. There are four levels of error correction in the QR format, we are using the lowest level here. There are also meta-data bits like encoding the length of the data and a mode indicator, these are shown in dark green here.
From the length of data bits and the error correction level the required size of QR code, called the version, can be calculated. The animation above shows the placement of all data bits with other codes into the shape of the right version of QR code.
For comparison the animation above does the same placement with the highest available level of error correction. As you can see the are many more dark red bits, which requires a higher version of QR code. Sometimes the center of the code is used for a logo or such, the loss from this can be compensated for with higher error correction levels.
For the rest of this page we will use the low level of error correction from before.
This step is rather simple, the previously empty parts get set up with the locator squares and the so-called timing lines, which alternate between white and black along their whole length. Then the bits from before can be placed as white or black squares, called modules here, into the body of the QR code.
In order to avoid large uniform areas and patterns that could be confused with the finder patterns, eight masks are available to modify the encoded data. The mask is shown in the middle here between the original code on the left and the final version on the right. If the mask pixel is black, the module is swapped from black to white or the reverse. If the mask pixel is white, the module color stays the same (a XOR operation). A score is calculated for each mask to choose the best one by heuristic. Here we don't see much improvement, but on some QR codes masking is essential to a good read-out.
If you look closely at the sides of the locator marks, you can see that not every module is filled in yet. The last step is to use this little remaining space to indicate which error correction level was chosen and which mask was used. This information needs its own error correction bits too.
And this is it! We have built an entire QR code from the ground up to encode the url of this page as a scannable image. The next page about QR codes is on how to decode the image of such a code back into text.
The Claude Opus LLM helped create this page. There are more algorithms and data structures to be found on the main page.
Please consider sharing this site on social media!