Sexy-QR

Sexy SVG QR-code generator

[ >> Online demo << ]

npm install sexy-qr

All radii default to 0. A radius of 1 fully rounds a one-cell-wide shape, so an isolated QR cell becomes a circle. Larger values use the same cell-relative scale: 3 fully rounds a 3 × 3 square. Negative values are clamped to 0, and values larger than the local contour permits are clamped to a full rounding. Non-finite or non-number values throw a TypeError.

resolveCornerRadius runs for every contour corner. Return a number to override that corner's radius, or undefined to retain defaultRadius. The returned radius uses the same QR-cell-relative scale as the other radius options.

const qrSvg = new QRSvg(qrCode, {
  size: 380,
  resolveCornerRadius: (cornerCtx) => {
    const isTargetCorner =
      cornerCtx.region === 'cornerBlock' &&
      cornerCtx.block === 'topRight' &&
      cornerCtx.part === 'ring' &&
      cornerCtx.corner === 'bottomLeft';

    if (!isTargetCorner) {
      return cornerCtx.defaultRadius;
    }

    return cornerCtx.contour === 'outer' ? 2 : 1;
  },
});

The callback receives:

• region: 'data' or 'cornerBlock'
• block: 'topLeft', 'topRight', or 'bottomLeft'
• part: 'ring' or 'center'
• contour: 'outer' or 'inner'
• corner: 'topLeft', 'topRight', 'bottomRight', or 'bottomLeft'
• vertex: the contour vertex in QR-cell coordinates
• cell: the associated QR cell coordinates
• defaultRadius: the radius selected by the regular options

import { QRCode, QRSvg, QRSvgPresets } from 'sexy-qr';

const svgCode = (() => {
  const qrCode = new QRCode({
    content: 'https://avin.github.io/sexy-qr',
    ecl: 'M', // 'L' | 'M' | 'Q' | 'H'
  });

  const qrSvg = new QRSvg(qrCode, {
    ...QRSvgPresets.roundedWithCircleCornerBlocks,
    size: 380, // px
    fill: '#182026',
    preContent: '<!-- QR Code -->',
  });

  return qrSvg.svg;
})();

QRSvgPresets provides immutable rounding configurations that can be mixed into the options object with the spread operator:

const qrSvg = new QRSvg(qrCode, {
  ...QRSvgPresets.circleCornerBlocks,
  size: 380,
  fill: '#182026',
});

Available presets:

• square
• rounded
• circleCornerBlocks
• roundedWithCircleCornerBlocks

Object spread is shallow. To override one nested preset value while retaining the others, spread that nested object explicitly:

const preset = QRSvgPresets.circleCornerBlocks;

const qrSvg = new QRSvg(qrCode, {
  ...preset,
  cornerBlockOuter: {
    ...preset.cornerBlockOuter,
    outerCornerRadius: 2,
  },
  size: 380,
});

Example 1	Example 2	Example 3	Example 4

The library and React demo use Vite and share one npm workspace:

npm install
npm run dev

Build both packages with:

npm run build

MIT © avin