Some Info About QR Codes

What is a QR Code?

A QR (Quick Response) Code is a two dimensional code developed by Denso Wave that can store up to 4,296 characters or 2,953 data bytes .

What can I do with those codes?

You can store all kinds of data in a QR Code, e.g. a URL, geocoordinates or simple plain text messages. Once you have a QR Code, a decoder (as obviously as it sounds) can decode it. The great thing is, some smartphones have a decoder app with extended functionality like opening the URL if it detects an URL.

What makes it special?

The data is stored redundantly thus if your code is damaged it's still possible to decode it if the damage is not bigger than up to 30% of the code.

Finder Pattern

The finder pattern is used for detecting the position of the QR Code. By arranging the finder pattern at the three corners of a QR code, the position, the size, and the angle of the symbol can be detected.

Timing Pattern

The timing pattern is used for identifying the central coordinate of each cell in the QR Code. This is done by arranging white and black units alternately in a line between the finder patterns.

Alignment Pattern

The alignment pattern is used for correcting distortion in QR codes. Depending on how much data is encoded you can see more or less but at least one alignment pattern in your code.
Tip: hover over the QR-Code for further examination ;-)
This is a demo about generating QR Codes with only HTML Elements as units, each unit you see in that code is a HTML DIV element.
Love it? Then you should really check out QR-Designer

Note:
If you're a developer and you want to do the same: This is a bad practise, you shouldn't do that. I did it because I

If you have any questions regarding the demo, have a tweet with me or drop me a line into my contact form on patrick-wied.at.