Engineering Lab Note: Deterministic QR Generation Without Tracking Pixels | TiltStack
Engineering Lab Note #04: The Deterministic QR Architecture
In my 14 years of backend engineering, I’ve seen some clever—and deeply invasive—data harvesting tactics. One of the most common is the "Free QR Generator" scam. Here’s how it works: you paste your URL, and they give you a QR code. But that QR code doesn't actually contain your URL. Instead, it contains a unique ID that redirects back to their servers, where they log the IP address, device type, and geolocation of every single person who scans it before finally forwarding them to your link.
This is a massive security hole. If their service goes down, your QR code breaks. If they decide to charge you for "premium features," they can hijack your link.
When we built the TiltStack Designer QR, we went in the opposite direction. We built a Deterministic, Client-Side Generator that produces high-resolution SVGs that point directly to your URL—with zero tracking pixels in between.
The Physics of the QR Matrix
A QR code is essentially a visual encoding of binary data into a two-dimensional matrix. It uses Reed-Solomon error correction to ensure the code remains scannable even if parts of it are obscured or damaged.
Most server-side generators render this matrix as a static PNG. This is a mistake for modern design. A PNG is resolution-dependent and often suffers from compression artifacts that make it harder for cameras to read correctly.
In the DevSuite, we generate the matrix as an SVG (Scalable Vector Graphics) path. An SVG is not a bitmap; it’s a set of mathematical instructions on how to draw a shape.
// Deterministic SVG path generation
function generateQRPath(url: string): string {
const qr = qrcode(url);
const size = qr.getModuleCount();
const pathParts: string[] = [];
for (let row = 0; row < size; row++) {
for (let col = 0; col < size; col++) {
if (qr.isDark(row, col)) {
// Draw a single M (Move) and L (Line) to create a perfect pixel
pathParts.push(`M${col},${row} h1 v1 h-1 z`);
}
}
}
return pathParts.join(' ');
}
Why Vectors Win for Design
By representing the QR modules as a single contiguous SVG path, we gain several architectural advantages:
- Resolution Independence: You can scale an SVG to the size of a billboard or a business card without losing a single pixel of clarity.
- Deterministic Branding: Because we control the path, we can easily apply brand-aligned gradients and colors using CSS variables.
- Zero Tracking: The destination URL is baked into the SVG modules themselves. There is no intermediate server, no redirect, and no database to breach.
The Deterministic Privacy Promise
Most QR generators are "black boxes." You don't know what they’re embedding in the metadata of the image.
With the Designer QR, our architecture is transparent:
- No Redirects: Your link goes exactly where you say it goes.
- No Cookies: We don't drop tracking cookies when you generate a code.
- Offline Capability: Once the tool is loaded, you can generate a hundred codes on an airplane with no internet connection.
At TiltStack, we believe architectural integrity starts with the smallest unit of interaction. Your QR code shouldn't be a Trojan horse for tracking data.
