Gallery
Designs to start from
Every design here scans. Open one in the generator to change it, or copy its JSON into your own code.
Module shapes
Eleven ways to draw the small squares that carry the data.
Dot
circles
Style JSON
{
"style": {
"modules": {
"shape": "dot",
"size": 0.9
}
}
}Rounded
soft squares
Style JSON
{
"style": {
"modules": {
"shape": "rounded",
"size": 0.9,
"roundness": 0.6
},
"eyes": {
"frame": "rounded",
"ball": "rounded"
}
}
}Diamond
rotated squares
Style JSON
{
"style": {
"modules": {
"shape": "diamond"
},
"eyes": {
"frame": "bevel",
"ball": "diamond"
}
}
}Star
four-point stars
Style JSON
{
"style": {
"modules": {
"shape": "star"
},
"eyes": {
"frame": "circle",
"ball": "circle"
}
}
}Fluid
connected, round
Style JSON
{
"style": {
"modules": {
"shape": "fluid"
},
"eyes": {
"frame": "rounded",
"ball": "circle"
}
}
}Liquid
smooth inner corners
Style JSON
{
"style": {
"modules": {
"shape": "liquid"
},
"eyes": {
"frame": "circle",
"ball": "circle"
}
}
}Bevel
cut corners
Style JSON
{
"style": {
"modules": {
"shape": "bevel"
},
"eyes": {
"frame": "bevel",
"ball": "bevel"
}
}
}Classy
two round corners
Style JSON
{
"style": {
"modules": {
"shape": "classy"
},
"eyes": {
"frame": "leaf",
"ball": "leaf"
}
}
}Horizontal bars
runs become pills
Style JSON
{
"style": {
"modules": {
"shape": "hbars",
"size": 0.8
}
}
}Vertical bars
runs become pills
Style JSON
{
"style": {
"modules": {
"shape": "vbars",
"size": 0.75
},
"eyes": {
"frame": "drop",
"ball": "drop"
}
}
}Color
Solid colors, transparency and gradients. Keep the dark parts dark.
Navy and red
Style JSON
{
"style": {
"modules": {
"shape": "dot",
"color": "#1d3557"
},
"eyes": {
"frame": "circle",
"ball": "circle",
"ballColor": "#e63946"
}
}
}Purple to blue
Style JSON
{
"style": {
"modules": {
"shape": "fluid",
"color": {
"type": "linear",
"angle": 45,
"stops": [
{
"offset": 0,
"color": "#6a11cb"
},
{
"offset": 1,
"color": "#2575fc"
}
]
}
},
"eyes": {
"frame": "rounded",
"ball": "circle",
"frameColor": "#e63946"
}
}
}Ocean
Style JSON
{
"style": {
"modules": {
"shape": "dot",
"color": {
"type": "radial",
"stops": [
{
"offset": 0,
"color": "#0b3d91"
},
{
"offset": 1,
"color": "#00796b"
}
]
}
},
"eyes": {
"frame": "leaf",
"ball": "leaf",
"frameColor": "#0b3d91"
},
"alignment": {
"frame": "circle",
"ball": "circle"
}
}
}Sunset
Style JSON
{
"style": {
"margin": 3,
"modules": {
"shape": "classy",
"roundness": 0.8,
"color": {
"type": "linear",
"angle": 45,
"stops": [
{
"offset": 0,
"color": "#c1121f"
},
{
"offset": 1,
"color": "#9d0208"
}
]
}
},
"eyes": {
"frame": "leaf",
"ball": "leaf"
},
"background": {
"color": "#fffdf8",
"radius": 4
}
}
}Forest
Style JSON
{
"style": {
"modules": {
"shape": "star",
"size": 0.95,
"color": "#1b4332"
},
"eyes": {
"frame": "bevel",
"ball": "bevel"
},
"background": {
"color": "#f1faee",
"radius": 2
}
}
}Night
light on dark
Style JSON
{
"style": {
"modules": {
"shape": "liquid",
"color": "#f1faee"
},
"eyes": {
"frame": "circle",
"ball": "circle",
"ballColor": "#ffb703"
},
"background": {
"color": "#1d3557",
"radius": 4
}
}
}Frames, labels and logos
A background, a border, a caption and a logo, all checked for scannability.
Scan me
Style JSON
{
"style": {
"margin": 2,
"modules": {
"shape": "liquid",
"color": "#1d3557"
},
"eyes": {
"frame": "rounded",
"ball": "rounded"
},
"background": {
"color": "#fff8e7",
"radius": 3
},
"border": {
"width": 1,
"color": "#1d3557"
},
"label": {
"text": "SCAN ME",
"color": "#1d3557"
}
}
}Caption on top
Style JSON
{
"style": {
"margin": 2,
"modules": {
"shape": "dot",
"color": "#2b2d42"
},
"eyes": {
"frame": "circle",
"ball": "circle"
},
"background": {
"color": "#ffffff",
"radius": 2
},
"border": {
"width": 0.5,
"color": "#2b2d42"
},
"label": {
"text": "qrkude.com",
"position": "top",
"size": 3,
"bold": false
}
}
}Logo
error correction H
Style JSON
{
"style": {
"modules": {
"shape": "fluid",
"color": "#14213d"
},
"eyes": {
"frame": "rounded",
"ball": "circle",
"ballColor": "#3451d1"
},
"logo": {
"href": "https://example.com/logo.png",
"size": 0.2,
"margin": 0.5,
"shape": "rounded",
"background": "#ffffff"
}
}
}Round logo
Style JSON
{
"style": {
"modules": {
"shape": "dot",
"color": "#3451d1"
},
"eyes": {
"frame": "circle",
"ball": "circle"
},
"logo": {
"href": "https://example.com/logo.png",
"size": 0.18,
"margin": 0.5,
"shape": "circle",
"background": "#ffffff"
}
}
}Transparent
for colored pages
Style JSON
{
"style": {
"modules": {
"shape": "bevel",
"color": "#1d3557"
},
"background": {
"color": null
}
}
}Badge
Style JSON
{
"style": {
"margin": 2,
"modules": {
"shape": "hbars",
"size": 0.8,
"color": "#ffffff"
},
"eyes": {
"frame": "rounded",
"ball": "rounded",
"ballColor": "#ffb703"
},
"background": {
"color": {
"type": "linear",
"angle": 135,
"stops": [
{
"offset": 0,
"color": "#3451d1"
},
{
"offset": 1,
"color": "#1d3557"
}
]
},
"radius": 4
}
}
}