@liquid-js/qr-code-styling 4.1.0 → 5.0.0-1

package/lib/qr-code-styling-node.js

@@ -45,14 +45,18 @@ function sanitizeGradient(gradient_newGradient) {
 DotType.extraRounded = "extra-rounded", DotType.verticalLine = "vertical-line", 
 DotType.horizontalLine = "horizontal-line", DotType.classy = "classy", DotType.classyRounded = "classy-rounded", 
 DotType.square = "square", DotType.smallSquare = "small-square", DotType.tinySquare = "tiny-square", 
-DotType.diamond = "diamond", DotType.wave = "wave", (CornerDotType = CornerDotType ||= {}).dot = "dot", 
-CornerDotType.square = "square", CornerDotType.heart = "heart", CornerDotType.extraRounded = "extra-rounded", 
-CornerDotType.classy = "classy", CornerDotType.outpoint = "outpoint", CornerDotType.inpoint = "inpoint", 
+DotType.diamond = "diamond", DotType.wave = "wave", DotType.heart = "heart", DotType.star = "star", 
+DotType.weave = "weave", DotType.pentagon = "pentagon", DotType.hexagon = "hexagon", 
+DotType.zebraHorizontal = "zebra-horizontal", DotType.zebraVertical = "zebra-vertical", 
+(CornerDotType = CornerDotType ||= {}).dot = "dot", CornerDotType.square = "square", 
+CornerDotType.heart = "heart", CornerDotType.extraRounded = "extra-rounded", CornerDotType.classy = "classy", 
+CornerDotType.inpoint = "inpoint", CornerDotType.outpoint = "outpoint", CornerDotType.star = "star", 
+CornerDotType.pentagon = "pentagon", CornerDotType.hexagon = "hexagon", CornerDotType.diamond = "diamond", 
 (CornerSquareType = CornerSquareType ||= {}).dot = "dot", CornerSquareType.square = "square", 
 CornerSquareType.extraRounded = "extra-rounded", CornerSquareType.classy = "classy", 
-CornerSquareType.outpoint = "outpoint", CornerSquareType.inpoint = "inpoint", (ShapeType = ShapeType ||= {}).square = "square", 
-ShapeType.circle = "circle", (ImageMode = ImageMode ||= {}).center = "center", ImageMode.overlay = "overlay", 
-ImageMode.background = "background";
+CornerSquareType.inpoint = "inpoint", CornerSquareType.outpoint = "outpoint", CornerSquareType.centerCircle = "center-circle", 
+(ShapeType = ShapeType ||= {}).square = "square", ShapeType.circle = "circle", (ImageMode = ImageMode ||= {}).center = "center", 
+ImageMode.overlay = "overlay", ImageMode.background = "background";
 
 let defaultOptions = {
     document: void 0,
@@ -129,697 +133,404 @@ function svgPath(strings, ...values) {
     }, "").trim().replace(/[\s\n\r]+/gim, " ");
 }
 
-class QRCornerDot {
-    type;
-    document;
-    _element;
-    get element() {
-        return this._element;
-    }
-    constructor(type, document) {
-        this.type = type, this.document = document;
-    }
-    draw(args) {
-        let drawFunction;
-        switch (this.type) {
-          case CornerDotType.square:
-            drawFunction = this.drawSquare;
-            break;
-
-          case CornerDotType.heart:
-            drawFunction = this.drawHeart;
-            break;
-
-          case CornerDotType.extraRounded:
-            drawFunction = this.drawRounded;
-            break;
-
-          case CornerDotType.classy:
-            drawFunction = this.drawClassy;
-            break;
-
-          case CornerDotType.inpoint:
-            drawFunction = this.drawInpoint;
-            break;
-
-          case CornerDotType.outpoint:
-            drawFunction = this.drawOutpoint;
-            break;
-
-          default:
-            drawFunction = this.drawDot;
-        }
-        drawFunction.call(this, args);
-    }
-    rotateFigure({x: cx, y: cy, size, rotation = 0, draw}) {
-        cx += size / 2, cy += size / 2, draw(), this._element?.setAttribute("transform", `rotate(${numToAttr(180 * rotation / Math.PI)},${cx},${cy})`);
-    }
-    basicDot(args) {
-        let {size, x, y} = args;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "circle"), 
-                this._element.setAttribute("cx", numToAttr(x + size / 2)), this._element.setAttribute("cy", numToAttr(y + size / 2)), 
-                this._element.setAttribute("r", numToAttr(size / 2));
-            }
-        });
-    }
-    basicSquare(args) {
-        let {size, x, y} = args;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "rect"), 
-                this._element.setAttribute("x", numToAttr(x)), this._element.setAttribute("y", numToAttr(y)), 
-                this._element.setAttribute("width", numToAttr(size)), this._element.setAttribute("height", numToAttr(size));
-            }
-        });
-    }
-    basicHeart(args) {
-        let {size, x, y} = args;
-        this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
-        let move = !1, i = 0;
-        this._element.setAttribute("d", [ "M", 1, .3262506, "c", 0, .0383376, -.0064626, .0758377, -.0193751, .1125001, "s", -.0356247, .076875, -.0681248, .1206252, "c", -.0325, .0437499, -.0762503, .0931247, -.1312501, .1481249, "C", .7262502, .7625008, .6566626, .8279132, .5724999, .9037505, "L", .5, .9687506, "L", .4275001, .9037505, "C", .3433374, .8279132, .2737499, .7625005, .21875, .7075007, "C", .1637501, .6525008, .1199999, .6031258, .0874999, .5593758, "S", .0322876, .4754133, .0193751, .4387506, "S", 0, .3645881, 0, .3262506, "c", 0, -.0783374, .0262499, -.1437498, .07875, -.1962499, "s", .1179124, -.07875, .1962499, -.07875, "c", .0433376, 0, .0845875, .0091625, .12375, .0274999, "S", .4716623, .1229131, .5, .1562506, "c", .0283374, -.0333375, .0620874, -.0591625, .1012502, -.0775, "c", .0391627, -.0183375, .0804126, -.0274999, .12375, -.0274999, "c", .0783374, 0, .1437497, .0262499, .1962501, .07875, "S", 1, .2479131, 1, .3262506, "z" ].map(v => "string" == typeof v ? (i = 0, 
-        move = v.toUpperCase() == v, v) : (i++, v *= size, move && (v += i % 2 == 1 ? x : y), 
-        numToAttr(v))).join(" "));
-    }
-    basicRounded(args) {
-        let {size, x, y} = args;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "rect"), 
-                this._element.setAttribute("x", numToAttr(x)), this._element.setAttribute("y", numToAttr(y)), 
-                this._element.setAttribute("width", numToAttr(size)), this._element.setAttribute("height", numToAttr(size)), 
-                this._element.setAttribute("rx", numToAttr(size / 4)), this._element.setAttribute("ry", numToAttr(size / 4));
-            }
-        });
-    }
-    basicClassy(args) {
-        let {size, x, y} = args, dotSize = size / 7;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._element.setAttribute("clip-rule", "evenodd"), this._element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * dotSize} ${2.5 * dotSize} h ${4.5 * dotSize} v ${-4.5 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} H ${x} z`);
-            }
-        });
-    }
-    basicInpoint(args) {
-        let {size, x, y} = args;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._element.setAttribute("clip-rule", "evenodd"), this._element.setAttribute("d", svgPath`M ${x} ${y + size / 2} v ${size / 4} a ${size / 4}, ${size / 4} 0 0 0 ${size / 4}, ${size / 4} h ${size / 4 * 3} v ${-size / 4 * 3} a ${size / 4}, ${size / 4} 0 0 0 ${-size / 4}, ${-size / 4} h ${-size / 2} a ${size / 4}, ${size / 4} 0 0 0 ${-size / 4}, ${size / 4} z`);
-            }
-        });
-    }
-    drawDot({x, y, size, rotation}) {
-        this.basicDot({
-            x,
-            y,
-            size,
-            rotation
-        });
-    }
-    drawSquare({x, y, size, rotation}) {
-        this.basicSquare({
-            x,
-            y,
-            size,
-            rotation
-        });
-    }
-    drawHeart({x, y, size, rotation}) {
-        this.basicHeart({
-            x,
-            y,
-            size,
-            rotation
-        });
-    }
-    drawRounded({x, y, size, rotation}) {
-        this.basicRounded({
-            x,
-            y,
-            size,
-            rotation
-        });
-    }
-    drawClassy({x, y, size, rotation}) {
-        this.basicClassy({
-            x,
-            y,
-            size,
-            rotation
-        });
-    }
-    drawInpoint({x, y, size, rotation}) {
-        this.basicInpoint({
-            x,
-            y,
-            size,
-            rotation
-        });
-    }
-    drawOutpoint({x, y, size, rotation}) {
-        this.basicInpoint({
-            x,
-            y,
-            size,
-            rotation: (rotation || 0) + Math.PI
-        });
-    }
+function rotateFigure({draw: draw_element, ...args}) {
+    let {x, y, size, rotation = 0} = args, cx = x + size / 2, cy = y + size / 2;
+    return draw_element = draw_element(args), rotation && (Array.isArray(draw_element) ? draw_element : [ draw_element ]).forEach(el => el.setAttribute("transform", `rotate(${numToAttr(180 * rotation / Math.PI)},${cx},${cy})`)), 
+    draw_element;
 }
 
-class QRCornerSquare {
-    type;
-    document;
-    _element;
-    _fill;
-    get element() {
-        return this._element;
-    }
-    get fill() {
-        return this._fill;
-    }
-    constructor(type, document) {
-        this.type = type, this.document = document;
-    }
-    draw(args) {
-        let drawFunction;
-        switch (this.type) {
-          case CornerSquareType.square:
-            drawFunction = this.drawSquare;
-            break;
-
-          case CornerSquareType.extraRounded:
-            drawFunction = this.drawExtraRounded;
-            break;
-
-          case CornerSquareType.classy:
-            drawFunction = this.drawClassy;
-            break;
-
-          case CornerSquareType.outpoint:
-            drawFunction = this.drawOutpoint;
-            break;
-
-          case CornerSquareType.inpoint:
-            drawFunction = this.drawInpoint;
-            break;
-
-          default:
-            drawFunction = this.drawDot;
-        }
-        drawFunction.call(this, args);
-    }
-    rotateFigure({x: cx, y: cy, size, rotation = 0, draw}) {
-        cx += size / 2, cy += size / 2, draw(), this._element?.setAttribute("transform", `rotate(${numToAttr(180 * rotation / Math.PI)},${cx},${cy})`), 
-        this._fill?.setAttribute("transform", `rotate(${numToAttr(180 * rotation / Math.PI)},${cx},${cy})`);
-    }
-    basicDot(args) {
-        let {size, x, y} = args, dotSize = size / 7;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._element.setAttribute("clip-rule", "evenodd"), this._element.setAttribute("d", svgPath`M ${x + size / 2} ${y} a ${size / 2} ${size / 2} 0 1 0 0.1 0 z m 0 ${dotSize} a ${size / 2 - dotSize} ${size / 2 - dotSize} 0 1 1 -0.1 0 Z`), 
-                this._fill = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._fill.setAttribute("clip-rule", "evenodd"), this._fill.setAttribute("d", svgPath`M ${x + size / 2} ${y - dotSize} a ${size / 2 + dotSize} ${size / 2 + dotSize} 0 1 0 0.1 0 z`);
-            }
-        });
-    }
-    basicSquare(args) {
-        let {size, x, y} = args, dotSize = size / 7;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._element.setAttribute("clip-rule", "evenodd"), this._element.setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} v ${-size} z M ${x + dotSize} ${y + dotSize} h ${size - 2 * dotSize} v ${size - 2 * dotSize} h ${2 * dotSize - size} z`), 
-                this._fill = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._fill.setAttribute("clip-rule", "evenodd"), this._fill.setAttribute("d", svgPath`M ${x - dotSize} ${y - dotSize} h ${size + 2 * dotSize} v ${size + 2 * dotSize} h ${-size - 2 * dotSize} z`);
-            }
-        });
-    }
-    basicExtraRounded(args) {
-        let {size, x, y} = args, dotSize = size / 7;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._element.setAttribute("clip-rule", "evenodd"), this._element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * dotSize} ${2.5 * dotSize} h ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * dotSize} ${2.5 * -dotSize} v ${-2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * -dotSize} ${2.5 * dotSize} z M ${x + 2.5 * dotSize} ${y + dotSize} h ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * dotSize} ${1.5 * dotSize} v ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * -dotSize} ${1.5 * dotSize} h ${-2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * -dotSize} ${1.5 * -dotSize} v ${-2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * dotSize} ${1.5 * -dotSize} z`), 
-                this._fill = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._fill.setAttribute("clip-rule", "evenodd"), this._fill.setAttribute("d", svgPath`M ${x - dotSize} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize}, 0, 0, 0, ${3.5 * dotSize} ${3.5 * dotSize} h ${2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize}, 0, 0, 0, ${3.5 * dotSize} ${3.5 * -dotSize} v ${-2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize}, 0, 0, 0, ${3.5 * -dotSize} ${3.5 * -dotSize} h ${-2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize}, 0, 0, 0, ${3.5 * -dotSize} ${3.5 * dotSize} z`);
-            }
-        });
-    }
-    basicClassy(args) {
-        let {size, x, y} = args, dotSize = size / 7;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._element.setAttribute("clip-rule", "evenodd"), this._element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * dotSize} ${2.5 * dotSize} h ${4.5 * dotSize} v ${-4.5 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} H ${x} z M ${x + 2.5 * dotSize} ${y + dotSize} h ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * dotSize} ${1.5 * dotSize} v ${3.5 * dotSize} h ${-3.5 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * -dotSize} ${1.5 * -dotSize} v ${-3.5 * dotSize} z`), 
-                this._fill = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._fill.setAttribute("clip-rule", "evenodd"), this._fill.setAttribute("d", svgPath`M ${x + .5 * dotSize} ${y - dotSize} h ${4 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize}, 0, 0, 1, ${3.5 * dotSize} ${3.5 * dotSize} v ${5.5 * dotSize} h ${-5.5 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize}, 0, 0, 1, ${3.5 * -dotSize} ${3.5 * -dotSize} v ${-5.5 * dotSize} z`);
-            }
-        });
-    }
-    basicInpoint(args) {
-        let {size, x, y} = args, dotSize = size / 7;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._element.setAttribute("clip-rule", "evenodd"), this._element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * dotSize} ${2.5 * dotSize} h ${4.5 * dotSize} v ${-4.5 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize}, 0, 0, 0, ${2.5 * -dotSize} ${2.5 * dotSize} z M ${x + 2.5 * dotSize} ${y + dotSize} h ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * dotSize} ${1.5 * dotSize} v ${3.5 * dotSize} h ${-3.5 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * -dotSize} ${1.5 * -dotSize} v ${-2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize}, 0, 0, 1, ${1.5 * dotSize} ${1.5 * -dotSize} z`), 
-                this._fill = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._fill.setAttribute("clip-rule", "evenodd"), this._fill.setAttribute("d", svgPath`M ${x + .5 * dotSize} ${y - dotSize} h ${4 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize}, 0, 0, 1, ${3.5 * dotSize} ${3.5 * dotSize} v ${5.5 * dotSize} h ${-5.5 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize}, 0, 0, 1, ${3.5 * -dotSize} ${3.5 * -dotSize} v ${-2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize}, 0, 0, 1, ${3.5 * dotSize} ${3.5 * -dotSize} z`);
-            }
-        });
-    }
-    drawDot({x, y, size, rotation}) {
-        this.basicDot({
-            x,
-            y,
-            size,
-            rotation
-        });
-    }
-    drawSquare({x, y, size, rotation}) {
-        this.basicSquare({
-            x,
-            y,
-            size,
-            rotation
-        });
-    }
-    drawExtraRounded({x, y, size, rotation}) {
-        this.basicExtraRounded({
-            x,
-            y,
-            size,
-            rotation
-        });
-    }
-    drawClassy({x, y, size, rotation}) {
-        this.basicClassy({
-            x,
-            y,
-            size,
-            rotation
-        });
-    }
-    drawInpoint({x, y, size, rotation}) {
-        this.basicInpoint({
+let DotElements = {
+    dot: args => {
+        const {size, x, y, document} = args;
+        return (args = document.createElementNS("http://www.w3.org/2000/svg", "circle")).setAttribute("cx", numToAttr(x + size / 2)), 
+        args.setAttribute("cy", numToAttr(y + size / 2)), args.setAttribute("r", numToAttr(size / 2)), 
+        args;
+    },
+    square: (args, {width = args.size, height = args.size} = {}) => {
+        const {x, y, size, document} = args;
+        return (args = document.createElementNS("http://www.w3.org/2000/svg", "rect")).setAttribute("x", numToAttr(x + (size - width) / 2)), 
+        args.setAttribute("y", numToAttr(y + (size - height) / 2)), args.setAttribute("width", numToAttr(width)), 
+        args.setAttribute("height", numToAttr(height)), args;
+    },
+    sideRounded: (args, {height = args.size} = {}) => {
+        const {size, x, y, document} = args;
+        return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y + (size - height) / 2} v ${height} h ${size / 2} a ${height / 2} ${height / 2} 0 0 0 0 ${-height} z`), 
+        args;
+    },
+    cornerRounded: args => {
+        const {size, x, y, document} = args;
+        return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} v ${-size / 2} a ${size / 2} ${size / 2} 0 0 0 ${-size / 2} ${-size / 2} z`), 
+        args;
+    },
+    cornerExtraRounded: args => {
+        const {size, x, y, document} = args;
+        return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} a ${size} ${size} 0 0 0 ${-size} ${-size} z`), 
+        args;
+    },
+    cornersRounded: args => {
+        const {size, x, y, document} = args;
+        return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y} v ${size / 2} a ${size / 2} ${size / 2} 0 0 0 ${size / 2} ${size / 2} h ${size / 2} v ${-size / 2} a ${size / 2} ${size / 2} 0 0 0 ${-size / 2} ${-size / 2} z`), 
+        args;
+    },
+    wave: args => {
+        const {size, x, y, document} = args;
+        var a1_c23y = 5 * Math.PI / 180, a2_c31y = 65 * Math.PI / 180;
+        args = size * (1 - .65 * Math.sin(a1_c23y)), a1_c23y = -size * (.95 - .65 * Math.cos(a1_c23y));
+        const c31x = -size * Math.sin(a2_c31y) / 2;
+        a2_c31y = size * Math.cos(a2_c31y) / 2;
+        const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        return element.setAttribute("d", svgPath`M ${x} ${y + size} c ${.65 * size} 0 ${args} ${a1_c23y} ${size} ${.95 * -size} c ${c31x} ${a2_c31y} ${-size / 2} ${size * (.95 - 1)} ${-size} ${size * (.95 - 1)} z`), 
+        element;
+    },
+    heart: args => {
+        const {size, x, y, document} = args;
+        return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", function(path, {x, y, size}) {
+            let move = !1, i = 0;
+            return path.map(v => "string" == typeof v ? (i = 0, move = v.toUpperCase() == v, 
+            v) : (i++, v *= size, move && (v += i % 2 == 1 ? x : y), numToAttr(v))).join(" ");
+        }([ "M", 1, .31629, "c", -86e-5, .15702, -.10534, .26323, -.21876, .38123, "c", -.06736, .06834, -.18938, .17948, -.28124, .26126, "c", -.09188, -.08178, -.2139, -.19292, -.28124, -.26126, "c", -.11344, -.118, -.2179, -.22422, -.21876, -.38123, "c", -96e-5, -.27136, .33154, -.36842, .5, -.17, "c", .16844, -.19842, .50094, -.10136, .5, .17, "z" ], {
             x,
             y,
-            size,
-            rotation
-        });
-    }
-    drawOutpoint({x, y, size, rotation}) {
-        this.basicInpoint({
+            size
+        })), args;
+    },
+    rounded: args => {
+        const {size, x, y, document} = args;
+        return (args = document.createElementNS("http://www.w3.org/2000/svg", "rect")).setAttribute("x", numToAttr(x)), 
+        args.setAttribute("y", numToAttr(y)), args.setAttribute("width", numToAttr(size)), 
+        args.setAttribute("height", numToAttr(size)), args.setAttribute("rx", numToAttr(size / 4)), 
+        args.setAttribute("ry", numToAttr(size / 4)), args;
+    },
+    classy: args => {
+        const {size, x, y, document} = args;
+        args = size / 7;
+        const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        return element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * args} v ${2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * args} ${2.5 * args} h ${4.5 * args} v ${-4.5 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * -args} ${2.5 * -args} h ${-2 * args} H ${x} z`), 
+        element;
+    },
+    inpoint: args => {
+        const {size, x, y, document} = args;
+        return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y + size / 2} v ${size / 4} a ${size / 4} ${size / 4} 0 0 0 ${size / 4} ${size / 4} h ${size / 4 * 3} v ${-size / 4 * 3} a ${size / 4} ${size / 4} 0 0 0 ${-size / 4} ${-size / 4} h ${-size / 2} a ${size / 4} ${size / 4} 0 0 0 ${-size / 4} ${size / 4} z`), 
+        args;
+    },
+    star: (args, {spikes = 5, outerRadius = args.size / 2, innerRadius = args.size / 4} = {}) => {
+        const {size, x, y, document} = args, cx = x + size / 2, cy = y + size / 2, angle = Math.PI / spikes;
+        return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", Array(2 * spikes).fill(0).map((__radius, i) => svgPath`${0 === i ? "M" : "L"} ${cx + (__radius = i % 2 == 0 ? outerRadius : innerRadius) * Math.sin(i * angle)} ${cy - __radius * Math.cos(i * angle)}`).join(" ")), 
+        args;
+    },
+    weave: args => {
+        const {size, x, y, document} = args, notch = (size - (args = .6 * size)) / 2, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        return element.setAttribute("d", svgPath`M ${x + notch} ${y} l ${args} 0 l 0 ${notch} l ${notch} 0 l 0 ${args} l ${-notch} 0 l 0 ${notch} l ${-args} 0 l 0 ${-notch} l ${-notch} 0 l 0 ${-args} l ${notch} 0 z`), 
+        element;
+    }
+}, qrCornerDotFigures = {
+    [CornerDotType.dot]: args => rotateFigure({
+        ...args,
+        draw: DotElements.dot
+    }),
+    [CornerDotType.square]: args => rotateFigure({
+        ...args,
+        draw: DotElements.square
+    }),
+    [CornerDotType.heart]: args => DotElements.heart(args),
+    [CornerDotType.extraRounded]: args => rotateFigure({
+        ...args,
+        draw: DotElements.rounded
+    }),
+    [CornerDotType.classy]: args => rotateFigure({
+        ...args,
+        draw: DotElements.classy
+    }),
+    [CornerDotType.inpoint]: args => rotateFigure({
+        ...args,
+        draw: DotElements.inpoint
+    }),
+    [CornerDotType.outpoint]: args => rotateFigure({
+        ...args,
+        rotation: (args.rotation || 0) + Math.PI,
+        draw: DotElements.inpoint
+    }),
+    [CornerDotType.star]: args => DotElements.star(args),
+    [CornerDotType.pentagon]: args => DotElements.star(args, {
+        spikes: 2.5,
+        outerRadius: args.size / 2,
+        innerRadius: args.size / 2
+    }),
+    [CornerDotType.hexagon]: args => DotElements.star(args, {
+        spikes: 3,
+        outerRadius: args.size / 2,
+        innerRadius: args.size / 2
+    }),
+    [CornerDotType.diamond]: args => rotateFigure({
+        ...args,
+        rotation: Math.PI / 4,
+        draw: args2 => DotElements.square(args2, {
+            width: .85 * args2.size,
+            height: .85 * args2.size
+        })
+    })
+}, SquareElements = {
+    dot: args => {
+        const {size, x, y, document} = args;
+        args = size / 7;
+        const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x + size / 2} ${y} a ${size / 2} ${size / 2} 0 1 0 0.1 0 z m 0 ${args} a ${size / 2 - args} ${size / 2 - args} 0 1 1 -0.1 0 Z`);
+        const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x + size / 2} ${y - args} a ${size / 2 + args} ${size / 2 + args} 0 1 0 0.1 0 z`), 
+        [ element, fill ];
+    },
+    square: args => {
+        const {size, x, y, document} = args;
+        args = size / 7;
+        const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} v ${-size} z M ${x + args} ${y + args} h ${size - 2 * args} v ${size - 2 * args} h ${2 * args - size} z`);
+        const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x - args} ${y - args} h ${size + 2 * args} v ${size + 2 * args} h ${-size - 2 * args} z`), 
+        [ element, fill ];
+    },
+    extraRounded: args => {
+        const {size, x, y, document} = args;
+        args = size / 7;
+        const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * args} v ${2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * args} ${2.5 * args} h ${2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * args} ${2.5 * -args} v ${-2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * -args} ${2.5 * -args} h ${-2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * -args} ${2.5 * args} z M ${x + 2.5 * args} ${y + args} h ${2 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * args} ${1.5 * args} v ${2 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * -args} ${1.5 * args} h ${-2 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * -args} ${1.5 * -args} v ${-2 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * args} ${1.5 * -args} z`);
+        const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x - args} ${y + 2.5 * args} v ${2 * args} a ${3.5 * args} ${3.5 * args} 0 0 0 ${3.5 * args} ${3.5 * args} h ${2 * args} a ${3.5 * args} ${3.5 * args} 0 0 0 ${3.5 * args} ${3.5 * -args} v ${-2 * args} a ${3.5 * args} ${3.5 * args} 0 0 0 ${3.5 * -args} ${3.5 * -args} h ${-2 * args} a ${3.5 * args} ${3.5 * args} 0 0 0 ${3.5 * -args} ${3.5 * args} z`), 
+        [ element, fill ];
+    },
+    classy: args => {
+        const {size, x, y, document} = args;
+        args = size / 7;
+        const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * args} v ${2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * args} ${2.5 * args} h ${4.5 * args} v ${-4.5 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * -args} ${2.5 * -args} h ${-2 * args} H ${x} z M ${x + 2.5 * args} ${y + args} h ${2 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * args} ${1.5 * args} v ${3.5 * args} h ${-3.5 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * -args} ${1.5 * -args} v ${-3.5 * args} z`);
+        const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x + .5 * args} ${y - args} h ${4 * args} a ${3.5 * args} ${3.5 * args} 0 0 1 ${3.5 * args} ${3.5 * args} v ${5.5 * args} h ${-5.5 * args} a ${3.5 * args} ${3.5 * args} 0 0 1 ${3.5 * -args} ${3.5 * -args} v ${-5.5 * args} z`), 
+        [ element, fill ];
+    },
+    inpoint: args => {
+        const {size, x, y, document} = args;
+        args = size / 7;
+        const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * args} v ${2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * args} ${2.5 * args} h ${4.5 * args} v ${-4.5 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * -args} ${2.5 * -args} h ${-2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * -args} ${2.5 * args} z M ${x + 2.5 * args} ${y + args} h ${2 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * args} ${1.5 * args} v ${3.5 * args} h ${-3.5 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * -args} ${1.5 * -args} v ${-2 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * args} ${1.5 * -args} z`);
+        const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x + .5 * args} ${y - args} h ${4 * args} a ${3.5 * args} ${3.5 * args} 0 0 1 ${3.5 * args} ${3.5 * args} v ${5.5 * args} h ${-5.5 * args} a ${3.5 * args} ${3.5 * args} 0 0 1 ${3.5 * -args} ${3.5 * -args} v ${-2 * args} a ${3.5 * args} ${3.5 * args} 0 0 1 ${3.5 * args} ${3.5 * -args} z`), 
+        [ element, fill ];
+    },
+    centerCircle: args => {
+        const {x, y, size} = args;
+        var circleRadius_fill = size / 2.5;
+        const cx = x + size / 2, cy = y + size / 2;
+        args = size / 7;
+        const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        return element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y} h ${size} v ${size} h ${-size} z M ${cx - circleRadius_fill} ${cy} a ${circleRadius_fill} ${circleRadius_fill} 0 1 0 ${2 * circleRadius_fill} 0 a ${circleRadius_fill} ${circleRadius_fill} 0 1 0 ${2 * -circleRadius_fill} 0 z`), 
+        (circleRadius_fill = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("clip-rule", "evenodd"), 
+        circleRadius_fill.setAttribute("d", svgPath`M ${x - args} ${y - args} h ${size + 2 * args} v ${size + 2 * args} h ${-size - 2 * args} z`), 
+        [ element, circleRadius_fill ];
+    },
+    cornerCut: args => {
+        const {x, y, size} = args;
+        args = size / 8;
+        const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", `M ${x} ${y} L ${x + size} ${y} L ${x + size} ${y + size - args} Q ${x + size} ${y + size} ${x + size - args} ${y + size} L ${x + args} ${y + size} Q ${x} ${y + size - args} ${x} ${y + size - args} Z M ${x + args} ${y + args} L ${x + size - args} ${y + args} L ${x + size - args} ${y + size - args} L ${x + args} ${y + size - args} Z`);
+        const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x - args} ${y - args} h ${size + 2 * args} v ${size + 2 * args} h ${-size - 2 * args} z`), 
+        [ element, fill ];
+    }
+}, qrCornerSquareFigures = {
+    [CornerSquareType.dot]: args => SquareElements.dot(args),
+    [CornerSquareType.square]: args => SquareElements.square(args),
+    [CornerSquareType.extraRounded]: args => SquareElements.extraRounded(args),
+    [CornerSquareType.classy]: args => rotateFigure({
+        ...args,
+        draw: SquareElements.classy
+    }),
+    [CornerSquareType.inpoint]: args => rotateFigure({
+        ...args,
+        draw: SquareElements.inpoint
+    }),
+    [CornerSquareType.outpoint]: ({rotation, ...args}) => rotateFigure({
+        ...args,
+        rotation: (rotation || 0) + Math.PI,
+        draw: SquareElements.inpoint
+    }),
+    [CornerSquareType.centerCircle]: args => SquareElements.centerCircle(args)
+}, compoundDots_rounded = ({x, y, size, document, getNeighbor: bottomNeighbor_getNeighbor}, {corner: corner_rotation = DotElements.cornerRounded, end = DotElements.sideRounded} = {}) => {
+    const leftNeighbor = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(-1, 0) : 0, rightNeighbor = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(0, -1) : 0, neighborsCount = leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor_getNeighbor = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(0, 1) : 0);
+    return 0 === neighborsCount ? DotElements.dot({
+        x,
+        y,
+        size,
+        document
+    }) : neighborsCount > 2 || leftNeighbor && rightNeighbor || topNeighbor && bottomNeighbor_getNeighbor ? DotElements.square({
+        x,
+        y,
+        size,
+        document
+    }) : 2 === neighborsCount ? (end = 0, leftNeighbor && topNeighbor ? end = Math.PI / 2 : topNeighbor && rightNeighbor ? end = Math.PI : rightNeighbor && bottomNeighbor_getNeighbor && (end = -Math.PI / 2), 
+    rotateFigure({
+        x,
+        y,
+        size,
+        rotation: end,
+        document,
+        draw: corner_rotation
+    })) : (corner_rotation = 0, topNeighbor ? corner_rotation = Math.PI / 2 : rightNeighbor ? corner_rotation = Math.PI : bottomNeighbor_getNeighbor && (corner_rotation = -Math.PI / 2), 
+    rotateFigure({
+        x,
+        y,
+        size,
+        rotation: corner_rotation,
+        document,
+        draw: end
+    }));
+}, compoundDots_classy = ({x, y, size, document, getNeighbor: bottomNeighbor}, {corner = DotElements.cornerRounded} = {}) => {
+    const leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0, rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
+    return leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0) === 0 ? rotateFigure({
+        x,
+        y,
+        size,
+        rotation: Math.PI / 2,
+        document,
+        draw: DotElements.cornersRounded
+    }) : leftNeighbor || topNeighbor ? rightNeighbor || bottomNeighbor ? DotElements.square({
+        x,
+        y,
+        size,
+        document
+    }) : rotateFigure({
+        x,
+        y,
+        size,
+        rotation: Math.PI / 2,
+        document,
+        draw: corner
+    }) : rotateFigure({
+        x,
+        y,
+        size,
+        rotation: -Math.PI / 2,
+        document,
+        draw: corner
+    });
+}, compoundDots_line = ({x, y, size, document, getNeighbor: bottomNeighbor}, {stripe = size, rotation = 0} = {}) => {
+    const topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
+    return bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0, topNeighbor && bottomNeighbor ? rotateFigure({
+        x,
+        y,
+        size,
+        rotation,
+        document,
+        draw: () => DotElements.square({
             x,
             y,
             size,
-            rotation: (rotation || 0) + Math.PI
-        });
-    }
-}
-
-class QRDot {
-    type;
-    document;
-    _element;
-    get element() {
-        return this._element;
-    }
-    constructor(type, document) {
-        this.type = type, this.document = document;
-    }
-    draw(args) {
-        let drawFunction;
-        switch (this.type) {
-          case DotType.dot:
-            drawFunction = this.drawDot;
-            break;
-
-          case DotType.randomDot:
-            drawFunction = this.drawRandomDot;
-            break;
-
-          case DotType.classy:
-            drawFunction = this.drawClassy;
-            break;
-
-          case DotType.classyRounded:
-            drawFunction = this.drawClassyRounded;
-            break;
-
-          case DotType.rounded:
-            drawFunction = this.drawRounded;
-            break;
-
-          case DotType.verticalLine:
-            drawFunction = this.drawVerticalLine;
-            break;
-
-          case DotType.horizontalLine:
-            drawFunction = this.drawHorizontalLine;
-            break;
-
-          case DotType.extraRounded:
-            drawFunction = this.drawExtraRounded;
-            break;
-
-          case DotType.diamond:
-            drawFunction = this.drawDiamond;
-            break;
-
-          case DotType.smallSquare:
-            drawFunction = this.drawSmallSquare;
-            break;
-
-          case DotType.tinySquare:
-            drawFunction = this.drawTinySquare;
-            break;
-
-          case DotType.wave:
-            drawFunction = this.drawWave;
-            break;
+            document
+        }, {
+            width: stripe
+        })
+    }) : topNeighbor && !bottomNeighbor ? (rotation += Math.PI / 2, rotateFigure({
+        x,
+        y,
+        size,
+        rotation,
+        document,
+        draw: args => DotElements.sideRounded(args, {
+            height: stripe
+        })
+    })) : bottomNeighbor && !topNeighbor ? (rotation -= Math.PI / 2, rotateFigure({
+        x,
+        y,
+        size,
+        rotation,
+        document,
+        draw: args => DotElements.sideRounded(args, {
+            height: stripe
+        })
+    })) : rotateFigure({
+        x,
+        y,
+        size,
+        rotation,
+        document,
+        draw: () => DotElements.dot({
+            x: x + (size - stripe) / 2,
+            y: y + (size - stripe) / 2,
+            size: stripe,
+            document
+        })
+    });
+}, qrDotFigures = {
+    [DotType.dot]: args => DotElements.dot(args),
+    [DotType.randomDot]: ({size, ...args}) => DotElements.dot({
+        ...args,
+        size: size * (.25 * Math.random() + .75)
+    }),
+    [DotType.rounded]: args => compoundDots_rounded(args),
+    [DotType.extraRounded]: args => compoundDots_rounded(args, {
+        corner: DotElements.cornerExtraRounded
+    }),
+    [DotType.verticalLine]: args => compoundDots_line(args),
+    [DotType.horizontalLine]: ({getNeighbor, ...args}) => compoundDots_line({
+        ...args,
+        getNeighbor: getNeighbor ? (x, y) => getNeighbor(y, x) : void 0
+    }, {
+        rotation: -Math.PI / 2
+    }),
+    [DotType.classy]: args => compoundDots_classy(args),
+    [DotType.classyRounded]: args => compoundDots_classy(args, {
+        corner: DotElements.cornerExtraRounded
+    }),
+    [DotType.square]: args => DotElements.square(args),
+    [DotType.smallSquare]: ({x, y, size, document}) => DotElements.square({
+        x: x += .15 * size,
+        y: y += .15 * size,
+        size: size = .7 * size,
+        document
+    }),
+    [DotType.tinySquare]: ({x, y, size, document}) => DotElements.square({
+        x: x += .35 * size,
+        y: y += .35 * size,
+        size: size = .3 * size,
+        document
+    }),
+    [DotType.diamond]: args => rotateFigure({
+        ...args,
+        rotation: Math.PI / 4,
+        draw: args2 => DotElements.square(args2, {
+            width: .85 * args2.size,
+            height: .85 * args2.size
+        })
+    }),
+    [DotType.wave]: args => compoundDots_rounded(args, {
+        corner: DotElements.cornerExtraRounded,
+        end: DotElements.wave
+    }),
+    [DotType.heart]: args => DotElements.heart(args),
+    [DotType.star]: args => DotElements.star(args),
+    [DotType.weave]: args => DotElements.weave(args),
+    [DotType.pentagon]: args => DotElements.star(args, {
+        spikes: 2.5,
+        outerRadius: args.size / 2,
+        innerRadius: args.size / 2
+    }),
+    [DotType.hexagon]: args => DotElements.star(args, {
+        spikes: 3,
+        outerRadius: args.size / 2,
+        innerRadius: args.size / 2
+    }),
+    [DotType.zebraVertical]: args => compoundDots_line(args, {
+        stripe: .8 * args.size
+    }),
+    [DotType.zebraHorizontal]: ({getNeighbor, ...args}) => compoundDots_line({
+        ...args,
+        getNeighbor: getNeighbor ? (x, y) => getNeighbor(y, x) : void 0
+    }, {
+        stripe: .8 * args.size,
+        rotation: -Math.PI / 2
+    })
+};
 
-          default:
-            drawFunction = this.drawSquare;
-        }
-        drawFunction.call(this, args);
-    }
-    rotateFigure({x: cx, y: cy, size, rotation = 0, draw}) {
-        cx += size / 2, cy += size / 2, draw(), this._element?.setAttribute("transform", `rotate(${numToAttr(180 * rotation / Math.PI)},${cx},${cy})`);
-    }
-    basicDot(args) {
-        let {size, x, y} = args;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "circle"), 
-                this._element.setAttribute("cx", numToAttr(x + size / 2)), this._element.setAttribute("cy", numToAttr(y + size / 2)), 
-                this._element.setAttribute("r", numToAttr(size / 2));
-            }
-        });
-    }
-    basicSquare(args) {
-        let {size, x, y} = args;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "rect"), 
-                this._element.setAttribute("x", numToAttr(x)), this._element.setAttribute("y", numToAttr(y)), 
-                this._element.setAttribute("width", numToAttr(size)), this._element.setAttribute("height", numToAttr(size));
-            }
-        });
-    }
-    basicSideRounded(args) {
-        let {size, x, y} = args;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._element.setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size / 2} a ${size / 2} ${size / 2}, 0, 0, 0, 0 ${-size} z`);
-            }
-        });
-    }
-    basicCornerRounded(args) {
-        let {size, x, y} = args;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._element.setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} v ${-size / 2} a ${size / 2} ${size / 2}, 0, 0, 0, ${-size / 2} ${-size / 2} z`);
-            }
-        });
-    }
-    basicCornerExtraRounded(args) {
-        let {size, x, y} = args;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._element.setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} a ${size} ${size}, 0, 0, 0, ${-size} ${-size} z`);
-            }
-        });
-    }
-    basicCornersRounded(args) {
-        let {size, x, y} = args;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._element.setAttribute("d", svgPath`M ${x} ${y} v ${size / 2} a ${size / 2} ${size / 2}, 0, 0, 0, ${size / 2} ${size / 2} h ${size / 2} v ${-size / 2} a ${size / 2} ${size / 2}, 0, 0, 0, ${-size / 2} ${-size / 2} z`);
-            }
-        });
-    }
-    basicWave(args) {
-        let {size, x, y} = args, a1 = 5 * Math.PI / 180, a2 = 65 * Math.PI / 180, c23x = size * (.95 - .65 * Math.cos(a1)), c23y = size * (1 - .65 * Math.sin(a1)), c31x = -size * Math.cos(a2) / 2, c31y = -size * Math.sin(a2) / 2;
-        this.rotateFigure({
-            ...args,
-            draw: () => {
-                this._element = this.document.createElementNS("http://www.w3.org/2000/svg", "path"), 
-                this._element.setAttribute("d", svgPath`M ${x} ${y} c 0 ${.65 * size} ${c23x} ${c23y} ${.95 * size} ${size} c ${c31x} ${c31y} ${size * (1 - .95)} ${-size / 2} ${size * (1 - .95)} ${-size} z`);
-            }
-        });
-    }
-    drawDot({x, y, size}) {
-        this.basicDot({
-            x,
-            y,
-            size,
-            rotation: 0
-        });
-    }
-    drawRandomDot({x, y, size}) {
-        this.basicDot({
-            x,
-            y,
-            size: size * (.25 * Math.random() + .75),
-            rotation: 0
-        });
-    }
-    drawSquare({x, y, size}) {
-        this.basicSquare({
-            x,
-            y,
-            size,
-            rotation: 0
-        });
-    }
-    drawSmallSquare({x, y, size}) {
-        let originalSize = size;
-        size = .7 * originalSize, x += .15 * originalSize, y += .15 * originalSize, this.basicSquare({
-            x,
-            y,
-            size,
-            rotation: 0
-        });
-    }
-    drawTinySquare({x, y, size}) {
-        let originalSize = size;
-        size = .3 * originalSize, x += .35 * originalSize, y += .35 * originalSize, this.basicSquare({
-            x,
-            y,
-            size,
-            rotation: 0
-        });
-    }
-    drawDiamond({x, y, size}) {
-        this.basicSquare({
-            x,
-            y,
-            size,
-            rotation: Math.PI / 4
-        });
-    }
-    drawRounded({x, y, size, getNeighbor: bottomNeighbor_getNeighbor}) {
-        var leftNeighbor_rotation = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(-1, 0) : 0;
-        let rightNeighbor = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(0, -1) : 0;
-        var neighborsCount_rotation = leftNeighbor_rotation + rightNeighbor + topNeighbor + (bottomNeighbor_getNeighbor = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(0, 1) : 0);
-        0 === neighborsCount_rotation ? this.basicDot({
-            x,
-            y,
-            size,
-            rotation: 0
-        }) : neighborsCount_rotation > 2 || leftNeighbor_rotation && rightNeighbor || topNeighbor && bottomNeighbor_getNeighbor ? this.basicSquare({
-            x,
-            y,
-            size,
-            rotation: 0
-        }) : 2 === neighborsCount_rotation ? (neighborsCount_rotation = 0, leftNeighbor_rotation && topNeighbor ? neighborsCount_rotation = Math.PI / 2 : topNeighbor && rightNeighbor ? neighborsCount_rotation = Math.PI : rightNeighbor && bottomNeighbor_getNeighbor && (neighborsCount_rotation = -Math.PI / 2), 
-        this.basicCornerRounded({
-            x,
-            y,
-            size,
-            rotation: neighborsCount_rotation
-        })) : 1 === neighborsCount_rotation && (leftNeighbor_rotation = 0, topNeighbor ? leftNeighbor_rotation = Math.PI / 2 : rightNeighbor ? leftNeighbor_rotation = Math.PI : bottomNeighbor_getNeighbor && (leftNeighbor_rotation = -Math.PI / 2), 
-        this.basicSideRounded({
-            x,
-            y,
-            size,
-            rotation: leftNeighbor_rotation
-        }));
-    }
-    drawVerticalLine({x, y, size, getNeighbor: bottomNeighbor}) {
-        let leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0, rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
-        leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0) === 0 || leftNeighbor && !topNeighbor && !bottomNeighbor || rightNeighbor && !topNeighbor && !bottomNeighbor ? this.basicDot({
-            x,
-            y,
-            size,
-            rotation: 0
-        }) : topNeighbor && bottomNeighbor ? this.basicSquare({
-            x,
-            y,
-            size,
-            rotation: 0
-        }) : topNeighbor && !bottomNeighbor ? this.basicSideRounded({
-            x,
-            y,
-            size,
-            rotation: Math.PI / 2
-        }) : bottomNeighbor && !topNeighbor && this.basicSideRounded({
-            x,
-            y,
-            size,
-            rotation: -Math.PI / 2
-        });
-    }
-    drawHorizontalLine({x, y, size, getNeighbor: bottomNeighbor}) {
-        let leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0, rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
-        leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0) === 0 || topNeighbor && !leftNeighbor && !rightNeighbor || bottomNeighbor && !leftNeighbor && !rightNeighbor ? this.basicDot({
-            x,
-            y,
-            size,
-            rotation: 0
-        }) : leftNeighbor && rightNeighbor ? this.basicSquare({
-            x,
-            y,
-            size,
-            rotation: 0
-        }) : leftNeighbor && !rightNeighbor ? this.basicSideRounded({
-            x,
-            y,
-            size,
-            rotation: 0
-        }) : rightNeighbor && !leftNeighbor && this.basicSideRounded({
-            x,
-            y,
-            size,
-            rotation: Math.PI
-        });
-    }
-    drawExtraRounded({x, y, size, getNeighbor: bottomNeighbor}) {
-        var leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0;
-        let rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
-        var neighborsCount = leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0);
-        0 === neighborsCount ? this.basicDot({
-            x,
-            y,
-            size,
-            rotation: 0
-        }) : neighborsCount > 2 || leftNeighbor && rightNeighbor || topNeighbor && bottomNeighbor ? this.basicSquare({
-            x,
-            y,
-            size,
-            rotation: 0
-        }) : 2 === neighborsCount ? (neighborsCount = 0, leftNeighbor && topNeighbor ? neighborsCount = Math.PI / 2 : topNeighbor && rightNeighbor ? neighborsCount = Math.PI : rightNeighbor && bottomNeighbor && (neighborsCount = -Math.PI / 2), 
-        this.basicCornerExtraRounded({
-            x,
-            y,
-            size,
-            rotation: neighborsCount
-        })) : 1 === neighborsCount && (leftNeighbor = 0, topNeighbor ? leftNeighbor = Math.PI / 2 : rightNeighbor ? leftNeighbor = Math.PI : bottomNeighbor && (leftNeighbor = -Math.PI / 2), 
-        this.basicSideRounded({
-            x,
-            y,
-            size,
-            rotation: leftNeighbor
-        }));
-    }
-    drawClassy({x, y, size, getNeighbor: bottomNeighbor}) {
-        let leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0, rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
-        leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0) === 0 ? this.basicCornersRounded({
-            x,
-            y,
-            size,
-            rotation: Math.PI / 2
-        }) : leftNeighbor || topNeighbor ? rightNeighbor || bottomNeighbor ? this.basicSquare({
-            x,
-            y,
-            size,
-            rotation: 0
-        }) : this.basicCornerRounded({
-            x,
-            y,
-            size,
-            rotation: Math.PI / 2
-        }) : this.basicCornerRounded({
-            x,
-            y,
-            size,
-            rotation: -Math.PI / 2
-        });
-    }
-    drawClassyRounded({x, y, size, getNeighbor: bottomNeighbor}) {
-        let leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0, rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
-        leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0) === 0 ? this.basicCornersRounded({
-            x,
-            y,
-            size,
-            rotation: Math.PI / 2
-        }) : leftNeighbor || topNeighbor ? rightNeighbor || bottomNeighbor ? this.basicSquare({
-            x,
-            y,
-            size,
-            rotation: 0
-        }) : this.basicCornerExtraRounded({
-            x,
-            y,
-            size,
-            rotation: Math.PI / 2
-        }) : this.basicCornerExtraRounded({
-            x,
-            y,
-            size,
-            rotation: -Math.PI / 2
-        });
-    }
-    drawWave({x, y, size, getNeighbor: bottomNeighbor}) {
-        let leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0, rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0;
-        var rotation = bottomNeighbor ? +bottomNeighbor(0, -1) : 0, neighborsCount = leftNeighbor + rightNeighbor + rotation + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0);
-        0 === neighborsCount ? this.basicDot({
-            x,
-            y,
-            size,
-            rotation: 0
-        }) : neighborsCount > 2 || leftNeighbor && rightNeighbor || rotation && bottomNeighbor ? this.basicSquare({
-            x,
-            y,
-            size,
-            rotation: 0
-        }) : 2 === neighborsCount ? (neighborsCount = 0, leftNeighbor && rotation ? neighborsCount = Math.PI / 2 : rotation && rightNeighbor ? neighborsCount = Math.PI : rightNeighbor && bottomNeighbor && (neighborsCount = -Math.PI / 2), 
-        this.basicCornerExtraRounded({
-            x,
-            y,
-            size,
-            rotation: neighborsCount
-        })) : 1 === neighborsCount && (rotation = 0, rightNeighbor ? rotation = Math.PI / 2 : bottomNeighbor ? rotation = Math.PI : leftNeighbor && (rotation = -Math.PI / 2), 
-        this.basicWave({
-            x,
-            y,
-            size,
-            rotation
-        }));
-    }
+function getQrDotFigure(type) {
+    return qrDotFigures[type] || qrDotFigures[DotType.square];
 }
 
 let browserImageTools = {
@@ -1014,7 +725,7 @@ class QRSVG {
         var minSize_xFakeBeginning = Math.min(options.width, options.height);
         options.imageOptions.mode == ImageMode.background && (minSize_xFakeBeginning -= 2 * dotSize * (options.imageOptions.margin || 0));
         var colorCount_xBeginning = Math.floor((options.width - count * dotSize) / 2), yBeginning_yFakeBeginning = Math.floor((options.height - count * dotSize) / 2);
-        let dot = new QRDot(options.dotsOptions.type, this.document), overlayDot = new QRDot(DotType.tinySquare, this.document), markerDot = new QRDot(DotType.square, this.document);
+        let draw = getQrDotFigure(options.dotsOptions.type);
         [this.dotsMask, this.dotsMaskGroup] = this.createMask("mask-dot-color"), this.defs.appendChild(this.dotsMask), 
         options.imageOptions.mode == ImageMode.background && ([this.lightDotsMask, this.lightDotsMaskGroup] = this.createMask("mask-light-dot-color"), 
         this.defs.appendChild(this.lightDotsMask));
@@ -1038,18 +749,20 @@ class QRSVG {
         for (let i = 0; i < fakeCount_margin; i++) {
             count = alignment.find(v => i - additionalDots > v - 3 && i - additionalDots < v + 3);
             for (let j = 0; j < fakeCount_margin; j++) center_jAlign = alignment.find(v => j - additionalDots > v - 3 && j - additionalDots < v + 3), 
-            null != fakeMatrix[i][j] && (this.lightDotsMask && (dot = count && center_jAlign && (count != alignment[0] && center_jAlign != alignment[0] || center_jAlign != alignment[0] && center_jAlign != alignment[alignment.length - 1] || count != alignment[0] && count != alignment[alignment.length - 1]) ? markerDot : overlayDot), 
-            fakeMatrix[i][j] ? (dot.draw({
+            null != fakeMatrix[i][j] && (this.lightDotsMask && (draw = count && center_jAlign && (count != alignment[0] && center_jAlign != alignment[0] || center_jAlign != alignment[0] && center_jAlign != alignment[alignment.length - 1] || count != alignment[0] && count != alignment[alignment.length - 1]) ? getQrDotFigure(DotType.square) : getQrDotFigure(DotType.tinySquare)), 
+            fakeMatrix[i][j] ? this.dotsMaskGroup && this.dotsMaskGroup.appendChild(draw({
                 x: minSize_xFakeBeginning + i * dotSize,
                 y: yBeginning_yFakeBeginning + j * dotSize,
                 size: dotSize,
+                document: this.options.document,
                 getNeighbor: (xOffset, yOffset) => !0 === fakeMatrix[i + xOffset]?.[j + yOffset]
-            }), dot.element && this.dotsMaskGroup && this.dotsMaskGroup.appendChild(dot.element)) : this.lightDotsMask && (dot.draw({
+            })) : this.lightDotsMask && this.lightDotsMaskGroup && this.lightDotsMaskGroup.appendChild(draw({
                 x: minSize_xFakeBeginning + i * dotSize,
                 y: yBeginning_yFakeBeginning + j * dotSize,
                 size: dotSize,
+                document: this.options.document,
                 getNeighbor: (xOffset, yOffset) => !1 === fakeMatrix[i + xOffset]?.[j + yOffset]
-            }), dot.element && this.lightDotsMaskGroup && this.lightDotsMaskGroup.appendChild(dot.element)));
+            })));
         }
         this.lightDotsMask && this.createColor({
             options: options.imageOptions.fill.gradient,
@@ -1076,73 +789,82 @@ class QRSVG {
         let options = this.options;
         if (!this._element) throw Error("Element code is not defined");
         let count = this.qr.getModuleCount(), dotSize = this.options.dotsOptions.size, cornersSquareSize = 7 * dotSize, cornersDotSize = 3 * dotSize, xBeginning = Math.floor((options.width - count * dotSize) / 2), yBeginning = Math.floor((options.height - count * dotSize) / 2);
-        [ [ 0, 0, 0 ], [ 1, 0, Math.PI / 2 ], [ 0, 1, -Math.PI / 2 ] ].forEach(([column_cornersDot, row, dot]) => {
-            let x = xBeginning + column_cornersDot * dotSize * (count - 7), y = yBeginning + row * dotSize * (count - 7);
+        [ [ 0, 0, 0 ], [ 1, 0, Math.PI / 2 ], [ 0, 1, -Math.PI / 2 ] ].forEach(([column_draw, row, draw]) => {
+            let x = xBeginning + column_draw * dotSize * (count - 7), y = yBeginning + row * dotSize * (count - 7);
             var cornersDotMaskGroup_cornersSquareMask = this.dotsMask;
             let cornersSquareMaskGroup = this.dotsMaskGroup;
-            var val, cornersDotMask_cornersSquare_dot = this.dotsMask;
-            if (cornersDotMaskGroup_cornersSquareMask = this.dotsMaskGroup, (options.cornersSquareOptions?.gradient || options.cornersSquareOptions?.color) && ([cornersDotMaskGroup_cornersSquareMask, cornersSquareMaskGroup] = this.createMask(`mask-corners-square-color-${column_cornersDot}-${row}`), 
-            this.defs.appendChild(cornersDotMaskGroup_cornersSquareMask), cornersDotMask_cornersSquare_dot = cornersDotMaskGroup_cornersSquareMask, 
+            var val, cornersDotMask_draw = this.dotsMask;
+            if (cornersDotMaskGroup_cornersSquareMask = this.dotsMaskGroup, (options.cornersSquareOptions?.gradient || options.cornersSquareOptions?.color) && ([cornersDotMaskGroup_cornersSquareMask, cornersSquareMaskGroup] = this.createMask(`mask-corners-square-color-${column_draw}-${row}`), 
+            this.defs.appendChild(cornersDotMaskGroup_cornersSquareMask), cornersDotMask_draw = cornersDotMaskGroup_cornersSquareMask, 
             cornersDotMaskGroup_cornersSquareMask = cornersSquareMaskGroup, this.createColor({
                 options: options.cornersSquareOptions?.gradient,
                 color: options.cornersSquareOptions?.color,
-                additionalRotation: dot,
+                additionalRotation: draw,
                 x,
                 y,
                 height: cornersSquareSize,
                 width: cornersSquareSize,
-                name: `corners-square-color-${column_cornersDot}-${row}`
-            })), val = options.cornersSquareOptions?.type, val && cornerSquareTypes.has(val)) (cornersDotMask_cornersSquare_dot = new QRCornerSquare(options.cornersSquareOptions.type, this.document)).draw({
-                x,
-                y,
-                size: cornersSquareSize,
-                rotation: dot
-            }), cornersDotMask_cornersSquare_dot.element && cornersSquareMaskGroup && cornersSquareMaskGroup.appendChild(cornersDotMask_cornersSquare_dot.element), 
-            cornersDotMask_cornersSquare_dot.fill && this.lightDotsMaskGroup && this.lightDotsMaskGroup.appendChild(cornersDotMask_cornersSquare_dot.fill); else {
-                cornersDotMask_cornersSquare_dot = new QRDot(options.cornersSquareOptions?.type || options.dotsOptions.type, this.document);
-                for (let i = 0; i < squareMask.length; i++) for (let j = 0; j < squareMask[i].length; j++) squareMask[i]?.[j] ? (cornersDotMask_cornersSquare_dot.draw({
+                name: `corners-square-color-${column_draw}-${row}`
+            })), val = options.cornersSquareOptions?.type, val && cornerSquareTypes.has(val)) {
+                let [cornerElement, cornerFill] = (qrCornerSquareFigures[options.cornersSquareOptions.type] || qrCornerSquareFigures[CornerSquareType.square])({
+                    x,
+                    y,
+                    size: cornersSquareSize,
+                    document: this.options.document,
+                    rotation: draw
+                });
+                cornersSquareMaskGroup && cornersSquareMaskGroup.appendChild(cornerElement), this.lightDotsMaskGroup && this.lightDotsMaskGroup.appendChild(cornerFill);
+            } else {
+                cornersDotMask_draw = getQrDotFigure(options.cornersSquareOptions?.type || options.dotsOptions.type);
+                for (let i = 0; i < squareMask.length; i++) for (let j = 0; j < squareMask[i].length; j++) squareMask[i]?.[j] ? cornersSquareMaskGroup && cornersSquareMaskGroup.appendChild(cornersDotMask_draw({
                     x: x + i * dotSize,
                     y: y + j * dotSize,
                     size: dotSize,
+                    document: this.options.document,
                     getNeighbor: (xOffset, yOffset) => !!squareMask[i + xOffset]?.[j + yOffset]
-                }), cornersDotMask_cornersSquare_dot.element && cornersSquareMaskGroup && cornersSquareMaskGroup.appendChild(cornersDotMask_cornersSquare_dot.element)) : this.lightDotsMask && !dotMask[i]?.[j] && (cornersDotMask_cornersSquare_dot.draw({
+                })) : this.lightDotsMask && !dotMask[i]?.[j] && this.lightDotsMaskGroup && this.lightDotsMaskGroup.appendChild(cornersDotMask_draw({
                     x: x + i * dotSize,
                     y: y + j * dotSize,
                     size: dotSize,
+                    document: this.options.document,
                     getNeighbor: (xOffset, yOffset) => !squareMask[i + xOffset]?.[j + yOffset] && !dotMask[i + xOffset]?.[j + yOffset]
-                }), cornersDotMask_cornersSquare_dot.element && this.lightDotsMaskGroup && this.lightDotsMaskGroup.appendChild(cornersDotMask_cornersSquare_dot.element));
-                if (this.lightDotsMask) for (let i = -1; i < 8; i++) for (let j = -1; j < 8; j++) -1 != i && 7 != i && -1 != j && 7 != j || (cornersDotMask_cornersSquare_dot.draw({
+                }));
+                if (this.lightDotsMask) for (let i = -1; i < 8; i++) for (let j = -1; j < 8; j++) (-1 == i || 7 == i || -1 == j || 7 == j) && this.lightDotsMaskGroup && this.lightDotsMaskGroup.appendChild(cornersDotMask_draw({
                     x: x + i * dotSize,
                     y: y + j * dotSize,
                     size: dotSize,
+                    document: this.options.document,
                     getNeighbor: (ii, jj) => (jj = j + jj, (ii = i + ii) >= -1 && ii <= 7 && jj >= -1 && jj <= 7 && (-1 == ii || 7 == ii || -1 == jj || 7 == jj))
-                }), cornersDotMask_cornersSquare_dot.element && this.lightDotsMaskGroup && this.lightDotsMaskGroup.appendChild(cornersDotMask_cornersSquare_dot.element));
+                }));
             }
-            if ((options.cornersDotOptions?.gradient || options.cornersDotOptions?.color) && ([cornersDotMask_cornersSquare_dot, cornersDotMaskGroup_cornersSquareMask] = this.createMask(`mask-corners-dot-color-${column_cornersDot}-${row}`), 
-            this.defs.appendChild(cornersDotMask_cornersSquare_dot), this.createColor({
+            if ((options.cornersDotOptions?.gradient || options.cornersDotOptions?.color) && ([cornersDotMask_draw, cornersDotMaskGroup_cornersSquareMask] = this.createMask(`mask-corners-dot-color-${column_draw}-${row}`), 
+            this.defs.appendChild(cornersDotMask_draw), this.createColor({
                 options: options.cornersDotOptions?.gradient,
                 color: options.cornersDotOptions?.color,
-                additionalRotation: dot,
+                additionalRotation: draw,
                 x: x + 2 * dotSize,
                 y: y + 2 * dotSize,
                 height: cornersDotSize,
                 width: cornersDotSize,
-                name: `corners-dot-color-${column_cornersDot}-${row}`
+                name: `corners-dot-color-${column_draw}-${row}`
             })), function(val) {
                 return !(!val || !cornerDotTypes.has(val));
-            }(options.cornersDotOptions?.type)) (column_cornersDot = new QRCornerDot(options.cornersDotOptions.type, this.document)).draw({
+            }(options.cornersDotOptions?.type)) column_draw = qrCornerDotFigures[options.cornersDotOptions.type] || qrCornerDotFigures[CornerDotType.square], 
+            cornersDotMaskGroup_cornersSquareMask && cornersDotMaskGroup_cornersSquareMask.appendChild(column_draw({
                 x: x + 2 * dotSize,
                 y: y + 2 * dotSize,
                 size: cornersDotSize,
-                rotation: dot
-            }), column_cornersDot.element && cornersDotMaskGroup_cornersSquareMask && cornersDotMaskGroup_cornersSquareMask.appendChild(column_cornersDot.element); else {
-                dot = new QRDot(options.cornersDotOptions?.type || options.dotsOptions.type, this.document);
-                for (let i = 0; i < dotMask.length; i++) for (let j = 0; j < dotMask[i].length; j++) dotMask[i]?.[j] && (dot.draw({
+                document: this.document,
+                rotation: draw
+            })); else {
+                draw = getQrDotFigure(options.cornersDotOptions?.type || options.dotsOptions.type);
+                for (let i = 0; i < dotMask.length; i++) for (let j = 0; j < dotMask[i].length; j++) dotMask[i]?.[j] && cornersDotMaskGroup_cornersSquareMask && cornersDotMaskGroup_cornersSquareMask.appendChild(draw({
                     x: x + i * dotSize,
                     y: y + j * dotSize,
                     size: dotSize,
+                    document: this.options.document,
                     getNeighbor: (xOffset, yOffset) => !!dotMask[i + xOffset]?.[j + yOffset]
-                }), dot.element && cornersDotMaskGroup_cornersSquareMask && cornersDotMaskGroup_cornersSquareMask.appendChild(dot.element));
+                }));
             }
         });
     }
@@ -1163,7 +885,9 @@ class QRSVG {
         this._element.appendChild(image);
     }
     createColor({options, color, additionalRotation: additionalRotation_positiveRotation, x, y, height, width, name}) {
-        var size = width > height ? width : height;
+        var gradientSize_x0 = width > height ? width : height;
+        x -= this.options.dotsOptions.size, y -= this.options.dotsOptions.size, width += 2 * this.options.dotsOptions.size, 
+        height += 2 * this.options.dotsOptions.size;
         let rect = this.document.createElementNS("http://www.w3.org/2000/svg", "rect");
         if (rect.setAttribute("x", numToAttr(x)), rect.setAttribute("y", numToAttr(y)), 
         rect.setAttribute("height", numToAttr(height)), rect.setAttribute("width", numToAttr(width)), 
@@ -1173,17 +897,17 @@ class QRSVG {
             gradient.setAttribute("id", name), gradient.setAttribute("gradientUnits", "userSpaceOnUse"), 
             gradient.setAttribute("fx", numToAttr(x + width / 2)), gradient.setAttribute("fy", numToAttr(y + height / 2)), 
             gradient.setAttribute("cx", numToAttr(x + width / 2)), gradient.setAttribute("cy", numToAttr(y + height / 2)), 
-            gradient.setAttribute("r", numToAttr(size / 2)); else {
-                size = x + width / 2;
+            gradient.setAttribute("r", numToAttr(gradientSize_x0 / 2)); else {
+                gradientSize_x0 = x + width / 2;
                 let y0 = y + height / 2;
-                x += width / 2, y += height / 2, (additionalRotation_positiveRotation = ((color = ((options.rotation || 0) + additionalRotation_positiveRotation) % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI)) >= 0 && additionalRotation_positiveRotation <= .25 * Math.PI || additionalRotation_positiveRotation > 1.75 * Math.PI && additionalRotation_positiveRotation <= 2 * Math.PI ? (size -= width / 2, 
+                x += width / 2, y += height / 2, (additionalRotation_positiveRotation = ((color = ((options.rotation || 0) + additionalRotation_positiveRotation) % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI)) >= 0 && additionalRotation_positiveRotation <= .25 * Math.PI || additionalRotation_positiveRotation > 1.75 * Math.PI && additionalRotation_positiveRotation <= 2 * Math.PI ? (gradientSize_x0 -= width / 2, 
                 y0 -= height / 2 * Math.tan(color), x += width / 2, y += height / 2 * Math.tan(color)) : additionalRotation_positiveRotation > .25 * Math.PI && additionalRotation_positiveRotation <= .75 * Math.PI ? (y0 -= height / 2, 
-                size -= width / 2 / Math.tan(color), y += height / 2, x += width / 2 / Math.tan(color)) : additionalRotation_positiveRotation > .75 * Math.PI && additionalRotation_positiveRotation <= 1.25 * Math.PI ? (size += width / 2, 
+                gradientSize_x0 -= width / 2 / Math.tan(color), y += height / 2, x += width / 2 / Math.tan(color)) : additionalRotation_positiveRotation > .75 * Math.PI && additionalRotation_positiveRotation <= 1.25 * Math.PI ? (gradientSize_x0 += width / 2, 
                 y0 += height / 2 * Math.tan(color), x -= width / 2, y -= height / 2 * Math.tan(color)) : additionalRotation_positiveRotation > 1.25 * Math.PI && additionalRotation_positiveRotation <= 1.75 * Math.PI && (y0 += height / 2, 
-                size += width / 2 / Math.tan(color), y -= height / 2, x -= width / 2 / Math.tan(color)), 
+                gradientSize_x0 += width / 2 / Math.tan(color), y -= height / 2, x -= width / 2 / Math.tan(color)), 
                 gradient = this.document.createElementNS("http://www.w3.org/2000/svg", "linearGradient"), 
                 gradient.setAttribute("id", name), gradient.setAttribute("gradientUnits", "userSpaceOnUse"), 
-                gradient.setAttribute("x1", numToAttr(size)), gradient.setAttribute("y1", numToAttr(y0)), 
+                gradient.setAttribute("x1", numToAttr(gradientSize_x0)), gradient.setAttribute("y1", numToAttr(y0)), 
                 gradient.setAttribute("x2", numToAttr(x)), gradient.setAttribute("y2", numToAttr(y));
             }
             options.colorStops.forEach(parsed_stopCfg => {