@liquid-js/qr-code-styling 4.0.8 → 5.0.0-0

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

@@ -45,12 +45,12 @@ 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", (CornerDotType = CornerDotType ||= {}).dot = "dot", 
+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", 
+CornerDotType.classy = "classy", CornerDotType.inpoint = "inpoint", CornerDotType.outpoint = "outpoint", 
 (CornerSquareType = CornerSquareType ||= {}).dot = "dot", CornerSquareType.square = "square", 
 CornerSquareType.extraRounded = "extra-rounded", CornerSquareType.classy = "classy", 
-CornerSquareType.outpoint = "outpoint", CornerSquareType.inpoint = "inpoint", (ShapeType = ShapeType ||= {}).square = "square", 
+CornerSquareType.inpoint = "inpoint", CornerSquareType.outpoint = "outpoint", (ShapeType = ShapeType ||= {}).square = "square", 
 ShapeType.circle = "circle", (ImageMode = ImageMode ||= {}).center = "center", ImageMode.overlay = "overlay", 
 ImageMode.background = "background";
 
@@ -129,656 +129,415 @@ 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({
-            x,
-            y,
-            size,
-            rotation
-        });
-    }
-    drawOutpoint({x, y, size, rotation}) {
-        this.basicInpoint({
-            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;
-
-          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`);
-            }
-        });
-    }
-    drawDot({x, y, size}) {
-        this.basicDot({
-            x,
-            y,
-            size,
-            rotation: 0
-        });
-    }
-    drawRandomDot({x, y, size}) {
-        this.basicDot({
+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 => {
+        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;
+    },
+    sideRounded: 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 / 2} a ${size / 2} ${size / 2}, 0, 0, 0, 0 ${-size} 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 * (.95 - .65 * Math.cos(a1_c23y)), a1_c23y = size * (1 - .65 * Math.sin(a1_c23y));
+        const c31x = -size * Math.cos(a2_c31y) / 2;
+        a2_c31y = -size * Math.sin(a2_c31y) / 2;
+        const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        return element.setAttribute("d", svgPath`M ${x} ${y} c 0 ${.65 * size} ${args} ${a1_c23y} ${.95 * size} ${size} c ${c31x} ${a2_c31y} ${size * (1 - .95)} ${-size / 2} ${size * (1 - .95)} ${-size} 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: size * (.25 * Math.random() + .75),
-            rotation: 0
-        });
-    }
-    drawSquare({x, y, size}) {
-        this.basicSquare({
+            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;
+    }
+}, 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
+    })
+}, 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 ];
+    }
+}, 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
+    })
+}, qrDotFigures = {
+    [DotType.dot]: args => DotElements.dot(args),
+    [DotType.randomDot]: ({size, ...args}) => DotElements.dot({
+        ...args,
+        size: size * (.25 * Math.random() + .75)
+    }),
+    [DotType.rounded]: ({x, y, size, document, getNeighbor: bottomNeighbor_getNeighbor}) => {
+        var leftNeighbor_rotation = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(-1, 0) : 0;
+        const 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);
+        return 0 === neighborsCount_rotation ? DotElements.dot({
             x,
             y,
             size,
-            rotation: 0
-        });
-    }
-    drawSmallSquare({x, y, size}) {
-        let originalSize = size;
-        size = .7 * originalSize, x += .15 * originalSize, y += .15 * originalSize, this.basicSquare({
+            document
+        }) : neighborsCount_rotation > 2 || leftNeighbor_rotation && rightNeighbor || topNeighbor && bottomNeighbor_getNeighbor ? DotElements.square({
             x,
             y,
             size,
-            rotation: 0
-        });
-    }
-    drawTinySquare({x, y, size}) {
-        let originalSize = size;
-        size = .3 * originalSize, x += .35 * originalSize, y += .35 * originalSize, this.basicSquare({
+            document
+        }) : 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), 
+        rotateFigure({
             x,
             y,
             size,
-            rotation: 0
-        });
-    }
-    drawDiamond({x, y, size}) {
-        this.basicSquare({
+            rotation: neighborsCount_rotation,
+            document,
+            draw: DotElements.cornerRounded
+        })) : (leftNeighbor_rotation = 0, topNeighbor ? leftNeighbor_rotation = Math.PI / 2 : rightNeighbor ? leftNeighbor_rotation = Math.PI : bottomNeighbor_getNeighbor && (leftNeighbor_rotation = -Math.PI / 2), 
+        rotateFigure({
             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({
+            rotation: leftNeighbor_rotation,
+            document,
+            draw: DotElements.sideRounded
+        }));
+    },
+    [DotType.extraRounded]: ({x, y, size, document, getNeighbor: bottomNeighbor}) => {
+        var leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0;
+        const rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
+        var neighborsCount = leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0);
+        return 0 === neighborsCount ? DotElements.dot({
             x,
             y,
             size,
-            rotation: 0
-        }) : neighborsCount_rotation > 2 || leftNeighbor_rotation && rightNeighbor || topNeighbor && bottomNeighbor_getNeighbor ? this.basicSquare({
+            document
+        }) : neighborsCount > 2 || leftNeighbor && rightNeighbor || topNeighbor && bottomNeighbor ? DotElements.square({
             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({
+            document
+        }) : 2 === neighborsCount ? (neighborsCount = 0, leftNeighbor && topNeighbor ? neighborsCount = Math.PI / 2 : topNeighbor && rightNeighbor ? neighborsCount = Math.PI : rightNeighbor && bottomNeighbor && (neighborsCount = -Math.PI / 2), 
+        rotateFigure({
             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({
+            rotation: neighborsCount,
+            document,
+            draw: DotElements.cornerExtraRounded
+        })) : (leftNeighbor = 0, topNeighbor ? leftNeighbor = Math.PI / 2 : rightNeighbor ? leftNeighbor = Math.PI : bottomNeighbor && (leftNeighbor = -Math.PI / 2), 
+        rotateFigure({
             x,
             y,
             size,
-            rotation: leftNeighbor_rotation
+            rotation: leftNeighbor,
+            document,
+            draw: DotElements.sideRounded
         }));
-    }
-    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({
+    },
+    [DotType.verticalLine]: ({x, y, size, document, getNeighbor: bottomNeighbor}) => {
+        const topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
+        return bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0, topNeighbor && bottomNeighbor ? DotElements.square({
             x,
             y,
             size,
-            rotation: 0
-        }) : topNeighbor && bottomNeighbor ? this.basicSquare({
+            document
+        }) : topNeighbor && !bottomNeighbor ? rotateFigure({
             x,
             y,
             size,
-            rotation: 0
-        }) : topNeighbor && !bottomNeighbor ? this.basicSideRounded({
+            rotation: Math.PI / 2,
+            document,
+            draw: DotElements.sideRounded
+        }) : bottomNeighbor && !topNeighbor ? rotateFigure({
             x,
             y,
             size,
-            rotation: Math.PI / 2
-        }) : bottomNeighbor && !topNeighbor && this.basicSideRounded({
+            rotation: -Math.PI / 2,
+            document,
+            draw: DotElements.sideRounded
+        }) : DotElements.dot({
             x,
             y,
             size,
-            rotation: -Math.PI / 2
+            document
         });
-    }
-    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({
+    },
+    [DotType.horizontalLine]: ({x, y, size, document, getNeighbor}) => {
+        const leftNeighbor = getNeighbor ? +getNeighbor(-1, 0) : 0;
+        return getNeighbor = getNeighbor ? +getNeighbor(1, 0) : 0, leftNeighbor && getNeighbor ? DotElements.square({
             x,
             y,
             size,
-            rotation: 0
-        }) : leftNeighbor && rightNeighbor ? this.basicSquare({
+            document
+        }) : leftNeighbor && !getNeighbor ? rotateFigure({
             x,
             y,
             size,
-            rotation: 0
-        }) : leftNeighbor && !rightNeighbor ? this.basicSideRounded({
+            rotation: 0,
+            document,
+            draw: DotElements.sideRounded
+        }) : getNeighbor && !leftNeighbor ? rotateFigure({
             x,
             y,
             size,
-            rotation: 0
-        }) : rightNeighbor && !leftNeighbor && this.basicSideRounded({
+            rotation: Math.PI,
+            document,
+            draw: DotElements.sideRounded
+        }) : DotElements.dot({
             x,
             y,
             size,
-            rotation: Math.PI
+            document
         });
-    }
-    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({
+    },
+    [DotType.classy]: ({x, y, size, document, getNeighbor: bottomNeighbor}) => {
+        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: 0
-        }) : neighborsCount > 2 || leftNeighbor && rightNeighbor || topNeighbor && bottomNeighbor ? this.basicSquare({
+            rotation: Math.PI / 2,
+            document,
+            draw: DotElements.cornersRounded
+        }) : leftNeighbor || topNeighbor ? rightNeighbor || bottomNeighbor ? DotElements.square({
             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({
+            document
+        }) : rotateFigure({
             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({
+            rotation: Math.PI / 2,
+            document,
+            draw: DotElements.cornerRounded
+        }) : rotateFigure({
             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({
+            rotation: -Math.PI / 2,
+            document,
+            draw: DotElements.cornerRounded
+        });
+    },
+    [DotType.classyRounded]: ({x, y, size, document, getNeighbor: bottomNeighbor}) => {
+        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
-        }) : leftNeighbor || topNeighbor ? rightNeighbor || bottomNeighbor ? this.basicSquare({
+            rotation: Math.PI / 2,
+            document,
+            draw: DotElements.cornersRounded
+        }) : leftNeighbor || topNeighbor ? rightNeighbor || bottomNeighbor ? DotElements.square({
             x,
             y,
             size,
-            rotation: 0
-        }) : this.basicCornerRounded({
+            document
+        }) : rotateFigure({
             x,
             y,
             size,
-            rotation: Math.PI / 2
-        }) : this.basicCornerRounded({
+            rotation: Math.PI / 2,
+            document,
+            draw: DotElements.cornerExtraRounded
+        }) : rotateFigure({
             x,
             y,
             size,
-            rotation: -Math.PI / 2
+            rotation: -Math.PI / 2,
+            document,
+            draw: DotElements.cornerExtraRounded
         });
-    }
-    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({
+    },
+    [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: DotElements.square
+    }),
+    [DotType.wave]: ({x, y, size, document, getNeighbor: bottomNeighbor}) => {
+        const 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);
+        return 0 === neighborsCount ? DotElements.dot({
             x,
             y,
             size,
-            rotation: Math.PI / 2
-        }) : leftNeighbor || topNeighbor ? rightNeighbor || bottomNeighbor ? this.basicSquare({
+            document
+        }) : neighborsCount > 2 || leftNeighbor && rightNeighbor || rotation && bottomNeighbor ? DotElements.square({
             x,
             y,
             size,
-            rotation: 0
-        }) : this.basicCornerExtraRounded({
+            document
+        }) : 2 === neighborsCount ? (neighborsCount = 0, leftNeighbor && rotation ? neighborsCount = Math.PI / 2 : rotation && rightNeighbor ? neighborsCount = Math.PI : rightNeighbor && bottomNeighbor && (neighborsCount = -Math.PI / 2), 
+        rotateFigure({
             x,
             y,
             size,
-            rotation: Math.PI / 2
-        }) : this.basicCornerExtraRounded({
+            rotation: neighborsCount,
+            document,
+            draw: DotElements.cornerExtraRounded
+        })) : (rotation = 0, rightNeighbor ? rotation = Math.PI / 2 : bottomNeighbor ? rotation = Math.PI : leftNeighbor && (rotation = -Math.PI / 2), 
+        rotateFigure({
             x,
             y,
             size,
-            rotation: -Math.PI / 2
-        });
+            rotation,
+            document,
+            draw: DotElements.wave
+        }));
     }
+};
+
+function getQrDotFigure(type) {
+    return qrDotFigures[type] || qrDotFigures[DotType.square];
 }
 
 let browserImageTools = {
@@ -833,7 +592,9 @@ function parseColor(base) {
     };
 }
 
-let squareMask = [ [ 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 1 ] ], dotMask = [ [ 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 1, 1, 1, 0, 0 ], [ 0, 0, 1, 1, 1, 0, 0 ], [ 0, 0, 1, 1, 1, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0 ] ];
+let squareMask = [ [ 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 1 ] ], cornerSquareTypes = new Set(Object.values(CornerSquareType));
+
+let dotMask = [ [ 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 1, 1, 1, 0, 0 ], [ 0, 0, 1, 1, 1, 0, 0 ], [ 0, 0, 1, 1, 1, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0 ] ], cornerDotTypes = new Set(Object.values(CornerDotType));
 
 class QRSVG {
     options;
@@ -971,7 +732,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));
@@ -995,18 +756,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,
@@ -1033,71 +796,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 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}`
-            })), options.cornersSquareOptions?.type) (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.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}`
-            })), options.cornersDotOptions?.type) (column_cornersDot = new QRCornerDot(options.cornersDotOptions.type, this.document)).draw({
+                name: `corners-dot-color-${column_draw}-${row}`
+            })), function(val) {
+                return !(!val || !cornerDotTypes.has(val));
+            }(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.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));
+                }));
             }
         });
     }