Generator
Design a QR code
Choose what the code contains, style it, and export it. Everything happens in your browser.
Start from a preset
Contenthttps://qrkude.com
A web address opens in the browser; any other text is shown as is.
Encoded text
https://qrkude.com
Modulesfluid
This shape always fills its cell.
Eyesrounded / circle
The eyes are the three large squares in the corners. Scanners use them to find the code.
Alignment patterns are the small squares that larger codes (version 2 and up) have inside.
Background and frame#ffffff
The empty border scanners need. 4 is the standard; keep at least 2.
Logonone
Labelnone
Leave empty for no label.
A CSS font list. The viewer's fonts are used.
Encodingv2 · ECC Q
How much of the code can be damaged or hidden. Auto uses H with a logo and M otherwise.
The pattern that balances dark and light modules.
Raise the level for free when the code does not get bigger.
Helps a few old scanners with accents and emoji. Modern scanners do not need it.
Use it in code
The same style gives the same QR code in every QRKude library. Each program below draws this design.
import { writeFileSync } from 'node:fs';
import { svg } from 'qrkude';
const doc = {
"style": {
"margin": 3,
"modules": {
"shape": "fluid",
"size": 1,
"roundness": 1,
"color": "#1d3557"
},
"eyes": {
"frame": "rounded",
"ball": "circle",
"frameColor": null,
"ballColor": null
},
"alignment": {
"frame": null,
"ball": null
},
"background": {
"color": "#ffffff",
"radius": 2
},
"border": {
"width": 0,
"color": "#000000"
},
"logo": null,
"label": null
}
};
writeFileSync('qr.svg', svg("https://qrkude.com", doc));
Node or a bundler. In a page, put the result into an element with innerHTML, or use <qr-kude config=...>. Installation and the full API: JavaScript documentation.