@tsparticles/plugin-polygon-mask 3.9.1 → 4.0.0-alpha.1

package/dist_browser_PolygonMaskPlugin_js.js

@@ -0,0 +1,120 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v4.0.0-alpha.1
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_polygon_mask"] = this["webpackChunk_tsparticles_plugin_polygon_mask"] || []).push([["dist_browser_PolygonMaskPlugin_js"],{
+
+/***/ "./dist/browser/Options/Classes/PolygonMask.js"
+/*!*****************************************************!*\
+  !*** ./dist/browser/Options/Classes/PolygonMask.js ***!
+  \*****************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonMask: () => (/* binding */ PolygonMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _PolygonMaskDraw_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PolygonMaskDraw.js */ \"./dist/browser/Options/Classes/PolygonMaskDraw.js\");\n/* harmony import */ var _PolygonMaskInline_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./PolygonMaskInline.js */ \"./dist/browser/Options/Classes/PolygonMaskInline.js\");\n/* harmony import */ var _PolygonMaskLocalSvg_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./PolygonMaskLocalSvg.js */ \"./dist/browser/Options/Classes/PolygonMaskLocalSvg.js\");\n/* harmony import */ var _PolygonMaskMove_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./PolygonMaskMove.js */ \"./dist/browser/Options/Classes/PolygonMaskMove.js\");\n/* harmony import */ var _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../Enums/PolygonMaskType.js */ \"./dist/browser/Enums/PolygonMaskType.js\");\n\n\n\n\n\n\nclass PolygonMask {\n  constructor(engine) {\n    this.draw = new _PolygonMaskDraw_js__WEBPACK_IMPORTED_MODULE_1__.PolygonMaskDraw(engine);\n    this.enable = false;\n    this.inline = new _PolygonMaskInline_js__WEBPACK_IMPORTED_MODULE_2__.PolygonMaskInline();\n    this.move = new _PolygonMaskMove_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskMove();\n    this.scale = 1;\n    this.type = _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_5__.PolygonMaskType.none;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    this.draw.load(data.draw);\n    this.inline.load(data.inline);\n    this.move.load(data.move);\n    if (data.scale !== undefined) {\n      this.scale = data.scale;\n    }\n    if (data.type !== undefined) {\n      this.type = data.type;\n    }\n    if (data.enable !== undefined) {\n      this.enable = data.enable;\n    } else {\n      this.enable = this.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_5__.PolygonMaskType.none;\n    }\n    if (data.url !== undefined) {\n      this.url = data.url;\n    }\n    if (data.data !== undefined) {\n      if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(data.data)) {\n        this.data = data.data;\n      } else {\n        this.data = new _PolygonMaskLocalSvg_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskLocalSvg();\n        this.data.load(data.data);\n      }\n    }\n    if (data.position !== undefined) {\n      this.position = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, data.position);\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMask.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/PolygonMaskDraw.js"
+/*!*********************************************************!*\
+  !*** ./dist/browser/Options/Classes/PolygonMaskDraw.js ***!
+  \*********************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonMaskDraw: () => (/* binding */ PolygonMaskDraw)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _PolygonMaskDrawStroke_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PolygonMaskDrawStroke.js */ \"./dist/browser/Options/Classes/PolygonMaskDrawStroke.js\");\n\n\nclass PolygonMaskDraw {\n  constructor(engine) {\n    this.enable = false;\n    this.stroke = new _PolygonMaskDrawStroke_js__WEBPACK_IMPORTED_MODULE_1__.PolygonMaskDrawStroke(engine);\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.enable !== undefined) {\n      this.enable = data.enable;\n    }\n    const stroke = data.stroke;\n    this.stroke.load(stroke);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMaskDraw.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/PolygonMaskDrawStroke.js"
+/*!***************************************************************!*\
+  !*** ./dist/browser/Options/Classes/PolygonMaskDrawStroke.js ***!
+  \***************************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonMaskDrawStroke: () => (/* binding */ PolygonMaskDrawStroke)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass PolygonMaskDrawStroke {\n  constructor(engine) {\n    this._engine = engine;\n    this.color = new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OptionsColor();\n    this.width = 0.5;\n    this.opacity = 1;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    this.color = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OptionsColor.create(this.color, data.color);\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(this.color.value)) {\n      this.opacity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.stringToAlpha)(this._engine, this.color.value) ?? this.opacity;\n    }\n    if (data.opacity !== undefined) {\n      this.opacity = data.opacity;\n    }\n    if (data.width !== undefined) {\n      this.width = data.width;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMaskDrawStroke.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/PolygonMaskInline.js"
+/*!***********************************************************!*\
+  !*** ./dist/browser/Options/Classes/PolygonMaskInline.js ***!
+  \***********************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonMaskInline: () => (/* binding */ PolygonMaskInline)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../Enums/PolygonMaskInlineArrangement.js */ \"./dist/browser/Enums/PolygonMaskInlineArrangement.js\");\n\n\nclass PolygonMaskInline {\n  constructor() {\n    this.arrangement = _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_1__.PolygonMaskInlineArrangement.onePerPoint;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.arrangement !== undefined) {\n      this.arrangement = data.arrangement;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMaskInline.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/PolygonMaskLocalSvg.js"
+/*!*************************************************************!*\
+  !*** ./dist/browser/Options/Classes/PolygonMaskLocalSvg.js ***!
+  \*************************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonMaskLocalSvg: () => (/* binding */ PolygonMaskLocalSvg)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass PolygonMaskLocalSvg {\n  constructor() {\n    this.path = [];\n    this.size = {\n      height: 0,\n      width: 0\n    };\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.path !== undefined) {\n      this.path = data.path;\n    }\n    if (data.size !== undefined) {\n      if (data.size.width !== undefined) {\n        this.size.width = data.size.width;\n      }\n      if (data.size.height !== undefined) {\n        this.size.height = data.size.height;\n      }\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMaskLocalSvg.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/PolygonMaskMove.js"
+/*!*********************************************************!*\
+  !*** ./dist/browser/Options/Classes/PolygonMaskMove.js ***!
+  \*********************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonMaskMove: () => (/* binding */ PolygonMaskMove)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Enums_PolygonMaskMoveType_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../Enums/PolygonMaskMoveType.js */ \"./dist/browser/Enums/PolygonMaskMoveType.js\");\n\n\nclass PolygonMaskMove {\n  constructor() {\n    this.radius = 10;\n    this.type = _Enums_PolygonMaskMoveType_js__WEBPACK_IMPORTED_MODULE_1__.PolygonMaskMoveType.path;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.radius !== undefined) {\n      this.radius = data.radius;\n    }\n    if (data.type !== undefined) {\n      this.type = data.type;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/Options/Classes/PolygonMaskMove.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/PolygonMaskInstance.js"
+/*!*********************************************!*\
+  !*** ./dist/browser/PolygonMaskInstance.js ***!
+  \*********************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonMaskInstance: () => (/* binding */ PolygonMaskInstance)\n/* harmony export */ });\n/* harmony import */ var _pathseg_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./pathseg.js */ \"./dist/browser/pathseg.js\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils.js */ \"./dist/browser/utils.js\");\n/* harmony import */ var _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Enums/PolygonMaskInlineArrangement.js */ \"./dist/browser/Enums/PolygonMaskInlineArrangement.js\");\n/* harmony import */ var _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Enums/PolygonMaskType.js */ \"./dist/browser/Enums/PolygonMaskType.js\");\n\n\n\n\n\nconst noPolygonDataLoaded = `No polygon data loaded.`,\n  noPolygonFound = `No polygon found, you need to specify SVG url in config.`,\n  origin = {\n    x: 0,\n    y: 0\n  },\n  half = 0.5,\n  double = 2;\nclass PolygonMaskInstance {\n  constructor(container, engine) {\n    this._checkInsidePolygon = position => {\n      const container = this._container,\n        options = container.actualOptions.polygon;\n      if (!options?.enable || options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.none || options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline) {\n        return true;\n      }\n      if (!this.raw) {\n        throw new Error(noPolygonFound);\n      }\n      const canvasSize = container.canvas.size,\n        x = position?.x ?? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * canvasSize.width,\n        y = position?.y ?? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * canvasSize.height,\n        indexOffset = 1;\n      let inside = false;\n      for (let i = 0, j = this.raw.length - indexOffset; i < this.raw.length; j = i++) {\n        const pi = this.raw[i],\n          pj = this.raw[j];\n        if (!pi || !pj) {\n          continue;\n        }\n        const intersect = pi.y > y !== pj.y > y && x < (pj.x - pi.x) * (y - pi.y) / (pj.y - pi.y) + pi.x;\n        if (intersect) {\n          inside = !inside;\n        }\n      }\n      if (options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inside) {\n        return inside;\n      } else {\n        return !inside;\n      }\n    };\n    this._createPath2D = () => {\n      const container = this._container,\n        options = container.actualOptions.polygon;\n      if (!options || !this.paths?.length) {\n        return;\n      }\n      for (const path of this.paths) {\n        const pathData = path.element.getAttribute(\"d\");\n        if (pathData) {\n          const path2d = new Path2D(pathData),\n            matrix = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.safeDocument)().createElementNS(\"http://www.w3.org/2000/svg\", \"svg\").createSVGMatrix(),\n            finalPath = new Path2D(),\n            transform = matrix.scale(this._scale);\n          finalPath.addPath(path2d, transform);\n          path.path2d = finalPath;\n        } else {\n          delete path.path2d;\n        }\n        if (path.path2d ?? !this.raw) {\n          continue;\n        }\n        path.path2d = new Path2D();\n        const firstIndex = 0,\n          firstPoint = this.raw[firstIndex];\n        if (!firstPoint) {\n          continue;\n        }\n        path.path2d.moveTo(firstPoint.x, firstPoint.y);\n        this.raw.forEach((pos, i) => {\n          if (i > firstIndex) {\n            path.path2d?.lineTo(pos.x, pos.y);\n          }\n        });\n        path.path2d.closePath();\n      }\n    };\n    this._downloadSvgPath = async (svgUrl, force) => {\n      const options = this._container.actualOptions.polygon;\n      if (!options) {\n        return;\n      }\n      const url = svgUrl ?? options.url,\n        forceDownload = force ?? false;\n      if (!url || this.paths !== undefined && !forceDownload) {\n        return this.raw;\n      }\n      const req = await fetch(url);\n      if (!req.ok) {\n        throw new Error(`Error occurred during polygon mask download`);\n      }\n      return this._parseSvgPath(await req.text(), force);\n    };\n    this._drawPoints = () => {\n      if (!this.raw) {\n        return;\n      }\n      for (const item of this.raw) {\n        void this._container.particles.addParticle({\n          x: item.x,\n          y: item.y\n        });\n      }\n    };\n    this._getEquidistantPointByIndex = index => {\n      const container = this._container,\n        options = container.actualOptions,\n        polygonMaskOptions = options.polygon;\n      if (!polygonMaskOptions) {\n        return;\n      }\n      if (!this.raw?.length || !this.paths?.length) {\n        throw new Error(noPolygonDataLoaded);\n      }\n      let offset = 0,\n        point;\n      const baseAccumulator = 0,\n        totalLength = this.paths.reduce((tot, path) => tot + path.length, baseAccumulator),\n        distance = totalLength / options.particles.number.value;\n      for (const path of this.paths) {\n        const pathDistance = distance * index - offset;\n        if (pathDistance <= path.length) {\n          point = path.element.getPointAtLength(pathDistance);\n          break;\n        } else {\n          offset += path.length;\n        }\n      }\n      const scale = this._scale;\n      return {\n        x: (point?.x ?? origin.x) * scale + (this.offset?.x ?? origin.x),\n        y: (point?.y ?? origin.y) * scale + (this.offset?.y ?? origin.y)\n      };\n    };\n    this._getPointByIndex = index => {\n      if (!this.raw?.length) {\n        throw new Error(noPolygonDataLoaded);\n      }\n      const coords = this.raw[index % this.raw.length];\n      if (!coords) {\n        return;\n      }\n      return {\n        x: coords.x,\n        y: coords.y\n      };\n    };\n    this._getRandomPoint = () => {\n      if (!this.raw?.length) {\n        throw new Error(noPolygonDataLoaded);\n      }\n      const coords = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.itemFromArray)(this.raw);\n      if (!coords) {\n        return;\n      }\n      return {\n        x: coords.x,\n        y: coords.y\n      };\n    };\n    this._getRandomPointByLength = () => {\n      const container = this._container,\n        options = container.actualOptions.polygon;\n      if (!options) {\n        return;\n      }\n      if (!this.raw?.length || !this.paths?.length) {\n        throw new Error(noPolygonDataLoaded);\n      }\n      const path = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.itemFromArray)(this.paths);\n      if (!path) {\n        return;\n      }\n      const offset = 1,\n        distance = Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * path.length) + offset,\n        point = path.element.getPointAtLength(distance),\n        scale = this._scale;\n      return {\n        x: point.x * scale + (this.offset?.x ?? origin.x),\n        y: point.y * scale + (this.offset?.y ?? origin.y)\n      };\n    };\n    this._initRawData = async force => {\n      const options = this._container.actualOptions.polygon;\n      if (!options) {\n        return;\n      }\n      if (options.url) {\n        this.raw = await this._downloadSvgPath(options.url, force);\n      } else if (options.data) {\n        const data = options.data;\n        let svg;\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isString)(data)) {\n          svg = data;\n        } else {\n          const getPath = p => `<path d=\"${p}\" />`,\n            path = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isArray)(data.path) ? data.path.map(getPath).join(\"\") : getPath(data.path);\n          const namespaces = 'xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"';\n          svg = `<svg ${namespaces} width=\"${data.size.width.toString()}\" height=\"${data.size.height.toString()}\">${path}</svg>`;\n        }\n        this.raw = this._parseSvgPath(svg, force);\n      }\n      this._createPath2D();\n      this._engine.dispatchEvent(\"polygonMaskLoaded\", {\n        container: this._container\n      });\n    };\n    this._parseSvgPath = (xml, force) => {\n      const forceDownload = force ?? false;\n      if (this.paths !== undefined && !forceDownload) {\n        return this.raw;\n      }\n      const container = this._container,\n        options = container.actualOptions.polygon;\n      if (!options) {\n        return;\n      }\n      const parser = new DOMParser(),\n        doc = parser.parseFromString(xml, \"image/svg+xml\"),\n        firstIndex = 0,\n        svg = doc.getElementsByTagName(\"svg\")[firstIndex];\n      if (!svg) {\n        return;\n      }\n      let svgPaths = svg.getElementsByTagName(\"path\");\n      if (!svgPaths.length) {\n        svgPaths = doc.getElementsByTagName(\"path\");\n      }\n      this.paths = [];\n      for (let i = 0; i < svgPaths.length; i++) {\n        const path = svgPaths.item(i);\n        if (path) {\n          this.paths.push({\n            element: path,\n            length: path.getTotalLength()\n          });\n        }\n      }\n      const scale = this._scale;\n      this.dimension.width = parseFloat(svg.getAttribute(\"width\") ?? \"0\") * scale;\n      this.dimension.height = parseFloat(svg.getAttribute(\"height\") ?? \"0\") * scale;\n      const position = options.position ?? {\n          x: 50,\n          y: 50\n        },\n        canvasSize = container.canvas.size;\n      this.offset = {\n        x: canvasSize.width * position.x / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.percentDenominator - this.dimension.width * half,\n        y: canvasSize.height * position.y / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.percentDenominator - this.dimension.height * half\n      };\n      return (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.parsePaths)(this.paths, scale, this.offset);\n    };\n    this._polygonBounce = (particle, _delta, direction) => {\n      const options = this._container.actualOptions.polygon;\n      if (!this.raw || !options?.enable || direction !== _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.OutModeDirection.top) {\n        return false;\n      }\n      if (options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inside || options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.outside) {\n        let closest, dx, dy;\n        const pos = particle.getPosition(),\n          radius = particle.getRadius(),\n          offset = 1;\n        for (let i = 0, j = this.raw.length - offset; i < this.raw.length; j = i++) {\n          const pi = this.raw[i],\n            pj = this.raw[j];\n          if (!pi || !pj) {\n            continue;\n          }\n          closest = (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.calcClosestPointOnSegment)(pi, pj, pos);\n          const dist = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getDistances)(pos, closest);\n          [dx, dy] = [dist.dx, dist.dy];\n          if (dist.distance < radius) {\n            (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.segmentBounce)(pi, pj, particle.velocity);\n            return true;\n          }\n        }\n        if (closest && dx !== undefined && dy !== undefined && !this._checkInsidePolygon(pos)) {\n          const factor = {\n              x: 1,\n              y: 1\n            },\n            diameter = radius * double,\n            inverse = -1;\n          if (pos.x >= closest.x) {\n            factor.x = -1;\n          }\n          if (pos.y >= closest.y) {\n            factor.y = -1;\n          }\n          particle.position.x = closest.x + diameter * factor.x;\n          particle.position.y = closest.y + diameter * factor.y;\n          particle.velocity.mult(inverse);\n          return true;\n        }\n      } else if (options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline) {\n        const dist = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getDistance)(particle.initialPosition, particle.getPosition()),\n          {\n            velocity\n          } = particle;\n        if (dist > this._moveRadius) {\n          velocity.x = velocity.y * half - velocity.x;\n          velocity.y = velocity.x * half - velocity.y;\n          return true;\n        }\n      }\n      return false;\n    };\n    this._randomPoint = () => {\n      const container = this._container,\n        options = container.actualOptions.polygon;\n      if (!options) {\n        return;\n      }\n      let position;\n      if (options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline) {\n        switch (options.inline.arrangement) {\n          case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.randomPoint:\n            position = this._getRandomPoint();\n            break;\n          case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.randomLength:\n            position = this._getRandomPointByLength();\n            break;\n          case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.equidistant:\n            position = this._getEquidistantPointByIndex(container.particles.count);\n            break;\n          case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.onePerPoint:\n          case _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.perPoint:\n          default:\n            position = this._getPointByIndex(container.particles.count);\n        }\n      } else {\n        const canvasSize = container.canvas.size;\n        position = {\n          x: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * canvasSize.width,\n          y: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * canvasSize.height\n        };\n      }\n      if (this._checkInsidePolygon(position)) {\n        return position;\n      } else {\n        return this._randomPoint();\n      }\n    };\n    this._container = container;\n    this._engine = engine;\n    this.dimension = {\n      height: 0,\n      width: 0\n    };\n    this._moveRadius = 0;\n    this._scale = 1;\n  }\n  clickPositionValid(position) {\n    const options = this._container.actualOptions.polygon;\n    return !!options?.enable && options.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.none && options.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline && this._checkInsidePolygon(position);\n  }\n  draw(context) {\n    if (!this.paths?.length) {\n      return;\n    }\n    const options = this._container.actualOptions.polygon;\n    if (!options?.enable) {\n      return;\n    }\n    const polygonDraw = options.draw;\n    if (!polygonDraw.enable) {\n      return;\n    }\n    const rawData = this.raw;\n    for (const path of this.paths) {\n      const path2d = path.path2d;\n      if (path2d && this.offset) {\n        (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.drawPolygonMaskPath)(this._engine, context, path2d, polygonDraw.stroke, this.offset, this._container.hdr);\n      } else if (rawData) {\n        (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.drawPolygonMask)(this._engine, context, rawData, polygonDraw.stroke, this._container.hdr);\n      }\n    }\n  }\n  async init() {\n    const container = this._container,\n      polygonMaskOptions = container.actualOptions.polygon,\n      pxRatio = container.retina.pixelRatio;\n    if (!polygonMaskOptions) {\n      return;\n    }\n    this._moveRadius = polygonMaskOptions.move.radius * pxRatio;\n    this._scale = polygonMaskOptions.scale * pxRatio;\n    if (polygonMaskOptions.enable) {\n      await this._initRawData();\n    }\n  }\n  particleBounce(particle, delta, direction) {\n    return this._polygonBounce(particle, delta, direction);\n  }\n  particlePosition(position) {\n    const options = this._container.actualOptions.polygon,\n      defaultLength = 0;\n    if (!(options?.enable && (this.raw?.length ?? defaultLength) > defaultLength)) {\n      return;\n    }\n    return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.deepExtend)({}, position ?? this._randomPoint());\n  }\n  particlesInitialization() {\n    const options = this._container.actualOptions.polygon;\n    if (options?.enable && options.type === _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.inline && (options.inline.arrangement === _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.onePerPoint || options.inline.arrangement === _Enums_PolygonMaskInlineArrangement_js__WEBPACK_IMPORTED_MODULE_3__.PolygonMaskInlineArrangement.perPoint)) {\n      this._drawPoints();\n      return true;\n    }\n    return false;\n  }\n  resize() {\n    const container = this._container,\n      options = container.actualOptions.polygon;\n    if (!(options?.enable && options.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_4__.PolygonMaskType.none)) {\n      return;\n    }\n    if (this.redrawTimeout) {\n      clearTimeout(this.redrawTimeout);\n    }\n    const timeout = 250;\n    this.redrawTimeout = setTimeout(() => {\n      void (async () => {\n        await this._initRawData(true);\n        await container.particles.redraw();\n      })();\n    }, timeout);\n  }\n  stop() {\n    delete this.raw;\n    delete this.paths;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/PolygonMaskInstance.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/PolygonMaskPlugin.js"
+/*!*******************************************!*\
+  !*** ./dist/browser/PolygonMaskPlugin.js ***!
+  \*******************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonMaskPlugin: () => (/* binding */ PolygonMaskPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_PolygonMask_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/PolygonMask.js */ \"./dist/browser/Options/Classes/PolygonMask.js\");\n/* harmony import */ var _PolygonMaskInstance_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PolygonMaskInstance.js */ \"./dist/browser/PolygonMaskInstance.js\");\n/* harmony import */ var _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Enums/PolygonMaskType.js */ \"./dist/browser/Enums/PolygonMaskType.js\");\n\n\n\nclass PolygonMaskPlugin {\n  constructor(engine) {\n    this.id = \"polygonMask\";\n    this._engine = engine;\n  }\n  getPlugin(container) {\n    return Promise.resolve(new _PolygonMaskInstance_js__WEBPACK_IMPORTED_MODULE_1__.PolygonMaskInstance(container, this._engine));\n  }\n  loadOptions(options, source) {\n    if (!this.needsPlugin(options) && !this.needsPlugin(source)) {\n      return;\n    }\n    let polygonOptions = options.polygon;\n    if (polygonOptions?.load === undefined) {\n      options.polygon = polygonOptions = new _Options_Classes_PolygonMask_js__WEBPACK_IMPORTED_MODULE_0__.PolygonMask(this._engine);\n    }\n    polygonOptions.load(source?.polygon);\n  }\n  needsPlugin(options) {\n    return options?.polygon?.enable ?? (options?.polygon?.type !== undefined && options.polygon.type !== _Enums_PolygonMaskType_js__WEBPACK_IMPORTED_MODULE_2__.PolygonMaskType.none);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/PolygonMaskPlugin.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/pathseg.js"
+/*!*********************************!*\
+  !*** ./dist/browser/pathseg.js ***!
+  \*********************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n\n\n(function () {\n  \"use strict\";\n\n  try {\n    if (typeof window === \"undefined\") return;\n    if (!(\"SVGPathSeg\" in window)) {\n      window.SVGPathSeg = function (type, typeAsLetter, owningPathSegList) {\n        this.pathSegType = type;\n        this.pathSegTypeAsLetter = typeAsLetter;\n        this._owningPathSegList = owningPathSegList;\n      };\n      window.SVGPathSeg.prototype.classname = \"SVGPathSeg\";\n      window.SVGPathSeg.PATHSEG_UNKNOWN = 0;\n      window.SVGPathSeg.PATHSEG_CLOSEPATH = 1;\n      window.SVGPathSeg.PATHSEG_MOVETO_ABS = 2;\n      window.SVGPathSeg.PATHSEG_MOVETO_REL = 3;\n      window.SVGPathSeg.PATHSEG_LINETO_ABS = 4;\n      window.SVGPathSeg.PATHSEG_LINETO_REL = 5;\n      window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS = 6;\n      window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL = 7;\n      window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS = 8;\n      window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL = 9;\n      window.SVGPathSeg.PATHSEG_ARC_ABS = 10;\n      window.SVGPathSeg.PATHSEG_ARC_REL = 11;\n      window.SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS = 12;\n      window.SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL = 13;\n      window.SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS = 14;\n      window.SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL = 15;\n      window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS = 16;\n      window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL = 17;\n      window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS = 18;\n      window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL = 19;\n      window.SVGPathSeg.prototype._segmentChanged = function () {\n        if (this._owningPathSegList) this._owningPathSegList.segmentChanged(this);\n      };\n      window.SVGPathSegClosePath = function (owningPathSegList) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_CLOSEPATH, \"z\", owningPathSegList);\n      };\n      window.SVGPathSegClosePath.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegClosePath.prototype.toString = function () {\n        return \"[object SVGPathSegClosePath]\";\n      };\n      window.SVGPathSegClosePath.prototype._asPathString = function () {\n        return this.pathSegTypeAsLetter;\n      };\n      window.SVGPathSegClosePath.prototype.clone = function () {\n        return new window.SVGPathSegClosePath(undefined);\n      };\n      window.SVGPathSegMovetoAbs = function (owningPathSegList, x, y) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_MOVETO_ABS, \"M\", owningPathSegList);\n        this._x = x;\n        this._y = y;\n      };\n      window.SVGPathSegMovetoAbs.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegMovetoAbs.prototype.toString = function () {\n        return \"[object SVGPathSegMovetoAbs]\";\n      };\n      window.SVGPathSegMovetoAbs.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._x} ${this._y}`;\n      };\n      window.SVGPathSegMovetoAbs.prototype.clone = function () {\n        return new window.SVGPathSegMovetoAbs(undefined, this._x, this._y);\n      };\n      Object.defineProperty(window.SVGPathSegMovetoAbs.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegMovetoAbs.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegMovetoRel = function (owningPathSegList, x, y) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_MOVETO_REL, \"m\", owningPathSegList);\n        this._x = x;\n        this._y = y;\n      };\n      window.SVGPathSegMovetoRel.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegMovetoRel.prototype.toString = function () {\n        return \"[object SVGPathSegMovetoRel]\";\n      };\n      window.SVGPathSegMovetoRel.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._x} ${this._y}`;\n      };\n      window.SVGPathSegMovetoRel.prototype.clone = function () {\n        return new window.SVGPathSegMovetoRel(undefined, this._x, this._y);\n      };\n      Object.defineProperty(window.SVGPathSegMovetoRel.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegMovetoRel.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegLinetoAbs = function (owningPathSegList, x, y) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_LINETO_ABS, \"L\", owningPathSegList);\n        this._x = x;\n        this._y = y;\n      };\n      window.SVGPathSegLinetoAbs.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegLinetoAbs.prototype.toString = function () {\n        return \"[object SVGPathSegLinetoAbs]\";\n      };\n      window.SVGPathSegLinetoAbs.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._x} ${this._y}`;\n      };\n      window.SVGPathSegLinetoAbs.prototype.clone = function () {\n        return new window.SVGPathSegLinetoAbs(undefined, this._x, this._y);\n      };\n      Object.defineProperty(window.SVGPathSegLinetoAbs.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegLinetoAbs.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegLinetoRel = function (owningPathSegList, x, y) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_LINETO_REL, \"l\", owningPathSegList);\n        this._x = x;\n        this._y = y;\n      };\n      window.SVGPathSegLinetoRel.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegLinetoRel.prototype.toString = function () {\n        return \"[object SVGPathSegLinetoRel]\";\n      };\n      window.SVGPathSegLinetoRel.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._x} ${this._y}`;\n      };\n      window.SVGPathSegLinetoRel.prototype.clone = function () {\n        return new window.SVGPathSegLinetoRel(undefined, this._x, this._y);\n      };\n      Object.defineProperty(window.SVGPathSegLinetoRel.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegLinetoRel.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegCurvetoCubicAbs = function (owningPathSegList, x, y, x1, y1, x2, y2) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS, \"C\", owningPathSegList);\n        this._x = x;\n        this._y = y;\n        this._x1 = x1;\n        this._y1 = y1;\n        this._x2 = x2;\n        this._y2 = y2;\n      };\n      window.SVGPathSegCurvetoCubicAbs.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegCurvetoCubicAbs.prototype.toString = function () {\n        return \"[object SVGPathSegCurvetoCubicAbs]\";\n      };\n      window.SVGPathSegCurvetoCubicAbs.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter}  ${this._x1} ${this._y1} ${this._x2} ${this._y2} ${this._x} ${this._y}`;\n      };\n      window.SVGPathSegCurvetoCubicAbs.prototype.clone = function () {\n        return new window.SVGPathSegCurvetoCubicAbs(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2);\n      };\n      Object.defineProperty(window.SVGPathSegCurvetoCubicAbs.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicAbs.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicAbs.prototype, \"x1\", {\n        get: function () {\n          return this._x1;\n        },\n        set: function (x1) {\n          this._x1 = x1;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicAbs.prototype, \"y1\", {\n        get: function () {\n          return this._y1;\n        },\n        set: function (y1) {\n          this._y1 = y1;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicAbs.prototype, \"x2\", {\n        get: function () {\n          return this._x2;\n        },\n        set: function (x2) {\n          this._x2 = x2;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicAbs.prototype, \"y2\", {\n        get: function () {\n          return this._y2;\n        },\n        set: function (y2) {\n          this._y2 = y2;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegCurvetoCubicRel = function (owningPathSegList, x, y, x1, y1, x2, y2) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, \"c\", owningPathSegList);\n        this._x = x;\n        this._y = y;\n        this._x1 = x1;\n        this._y1 = y1;\n        this._x2 = x2;\n        this._y2 = y2;\n      };\n      window.SVGPathSegCurvetoCubicRel.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegCurvetoCubicRel.prototype.toString = function () {\n        return \"[object SVGPathSegCurvetoCubicRel]\";\n      };\n      window.SVGPathSegCurvetoCubicRel.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._x1} ${this._y1} ${this._x2} ${this._y2} ${this._x} ${this._y}`;\n      };\n      window.SVGPathSegCurvetoCubicRel.prototype.clone = function () {\n        return new window.SVGPathSegCurvetoCubicRel(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2);\n      };\n      Object.defineProperty(window.SVGPathSegCurvetoCubicRel.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicRel.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicRel.prototype, \"x1\", {\n        get: function () {\n          return this._x1;\n        },\n        set: function (x1) {\n          this._x1 = x1;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicRel.prototype, \"y1\", {\n        get: function () {\n          return this._y1;\n        },\n        set: function (y1) {\n          this._y1 = y1;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicRel.prototype, \"x2\", {\n        get: function () {\n          return this._x2;\n        },\n        set: function (x2) {\n          this._x2 = x2;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicRel.prototype, \"y2\", {\n        get: function () {\n          return this._y2;\n        },\n        set: function (y2) {\n          this._y2 = y2;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegCurvetoQuadraticAbs = function (owningPathSegList, x, y, x1, y1) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS, \"Q\", owningPathSegList);\n        this._x = x;\n        this._y = y;\n        this._x1 = x1;\n        this._y1 = y1;\n      };\n      window.SVGPathSegCurvetoQuadraticAbs.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegCurvetoQuadraticAbs.prototype.toString = function () {\n        return \"[object SVGPathSegCurvetoQuadraticAbs]\";\n      };\n      window.SVGPathSegCurvetoQuadraticAbs.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._x1} ${this._y1} ${this._x} ${this._y}`;\n      };\n      window.SVGPathSegCurvetoQuadraticAbs.prototype.clone = function () {\n        return new window.SVGPathSegCurvetoQuadraticAbs(undefined, this._x, this._y, this._x1, this._y1);\n      };\n      Object.defineProperty(window.SVGPathSegCurvetoQuadraticAbs.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoQuadraticAbs.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoQuadraticAbs.prototype, \"x1\", {\n        get: function () {\n          return this._x1;\n        },\n        set: function (x1) {\n          this._x1 = x1;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoQuadraticAbs.prototype, \"y1\", {\n        get: function () {\n          return this._y1;\n        },\n        set: function (y1) {\n          this._y1 = y1;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegCurvetoQuadraticRel = function (owningPathSegList, x, y, x1, y1) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL, \"q\", owningPathSegList);\n        this._x = x;\n        this._y = y;\n        this._x1 = x1;\n        this._y1 = y1;\n      };\n      window.SVGPathSegCurvetoQuadraticRel.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegCurvetoQuadraticRel.prototype.toString = function () {\n        return \"[object SVGPathSegCurvetoQuadraticRel]\";\n      };\n      window.SVGPathSegCurvetoQuadraticRel.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._x1} ${this._y1} ${this._x} ${this._y}`;\n      };\n      window.SVGPathSegCurvetoQuadraticRel.prototype.clone = function () {\n        return new window.SVGPathSegCurvetoQuadraticRel(undefined, this._x, this._y, this._x1, this._y1);\n      };\n      Object.defineProperty(window.SVGPathSegCurvetoQuadraticRel.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoQuadraticRel.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoQuadraticRel.prototype, \"x1\", {\n        get: function () {\n          return this._x1;\n        },\n        set: function (x1) {\n          this._x1 = x1;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoQuadraticRel.prototype, \"y1\", {\n        get: function () {\n          return this._y1;\n        },\n        set: function (y1) {\n          this._y1 = y1;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegArcAbs = function (owningPathSegList, x, y, r1, r2, angle, largeArcFlag, sweepFlag) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_ARC_ABS, \"A\", owningPathSegList);\n        this._x = x;\n        this._y = y;\n        this._r1 = r1;\n        this._r2 = r2;\n        this._angle = angle;\n        this._largeArcFlag = largeArcFlag;\n        this._sweepFlag = sweepFlag;\n      };\n      window.SVGPathSegArcAbs.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegArcAbs.prototype.toString = function () {\n        return \"[object SVGPathSegArcAbs]\";\n      };\n      window.SVGPathSegArcAbs.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._r1} ${this._r2} ${this._angle} ${this._largeArcFlag ? \"1\" : \"0\"} ${this._sweepFlag ? \"1\" : \"0\"} ${this._x} ${this._y}`;\n      };\n      window.SVGPathSegArcAbs.prototype.clone = function () {\n        return new window.SVGPathSegArcAbs(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag);\n      };\n      Object.defineProperty(window.SVGPathSegArcAbs.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegArcAbs.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegArcAbs.prototype, \"r1\", {\n        get: function () {\n          return this._r1;\n        },\n        set: function (r1) {\n          this._r1 = r1;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegArcAbs.prototype, \"r2\", {\n        get: function () {\n          return this._r2;\n        },\n        set: function (r2) {\n          this._r2 = r2;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegArcAbs.prototype, \"angle\", {\n        get: function () {\n          return this._angle;\n        },\n        set: function (angle) {\n          this._angle = angle;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegArcAbs.prototype, \"largeArcFlag\", {\n        get: function () {\n          return this._largeArcFlag;\n        },\n        set: function (largeArcFlag) {\n          this._largeArcFlag = largeArcFlag;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegArcAbs.prototype, \"sweepFlag\", {\n        get: function () {\n          return this._sweepFlag;\n        },\n        set: function (sweepFlag) {\n          this._sweepFlag = sweepFlag;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegArcRel = function (owningPathSegList, x, y, r1, r2, angle, largeArcFlag, sweepFlag) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_ARC_REL, \"a\", owningPathSegList);\n        this._x = x;\n        this._y = y;\n        this._r1 = r1;\n        this._r2 = r2;\n        this._angle = angle;\n        this._largeArcFlag = largeArcFlag;\n        this._sweepFlag = sweepFlag;\n      };\n      window.SVGPathSegArcRel.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegArcRel.prototype.toString = function () {\n        return \"[object SVGPathSegArcRel]\";\n      };\n      window.SVGPathSegArcRel.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._r1} ${this._r2} ${this._angle} ${this._largeArcFlag ? \"1\" : \"0\"} ${this._sweepFlag ? \"1\" : \"0\"} ${this._x} ${this._y}`;\n      };\n      window.SVGPathSegArcRel.prototype.clone = function () {\n        return new window.SVGPathSegArcRel(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag);\n      };\n      Object.defineProperty(window.SVGPathSegArcRel.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegArcRel.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegArcRel.prototype, \"r1\", {\n        get: function () {\n          return this._r1;\n        },\n        set: function (r1) {\n          this._r1 = r1;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegArcRel.prototype, \"r2\", {\n        get: function () {\n          return this._r2;\n        },\n        set: function (r2) {\n          this._r2 = r2;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegArcRel.prototype, \"angle\", {\n        get: function () {\n          return this._angle;\n        },\n        set: function (angle) {\n          this._angle = angle;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegArcRel.prototype, \"largeArcFlag\", {\n        get: function () {\n          return this._largeArcFlag;\n        },\n        set: function (largeArcFlag) {\n          this._largeArcFlag = largeArcFlag;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegArcRel.prototype, \"sweepFlag\", {\n        get: function () {\n          return this._sweepFlag;\n        },\n        set: function (sweepFlag) {\n          this._sweepFlag = sweepFlag;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegLinetoHorizontalAbs = function (owningPathSegList, x) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS, \"H\", owningPathSegList);\n        this._x = x;\n      };\n      window.SVGPathSegLinetoHorizontalAbs.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegLinetoHorizontalAbs.prototype.toString = function () {\n        return \"[object SVGPathSegLinetoHorizontalAbs]\";\n      };\n      window.SVGPathSegLinetoHorizontalAbs.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._x}`;\n      };\n      window.SVGPathSegLinetoHorizontalAbs.prototype.clone = function () {\n        return new window.SVGPathSegLinetoHorizontalAbs(undefined, this._x);\n      };\n      Object.defineProperty(window.SVGPathSegLinetoHorizontalAbs.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegLinetoHorizontalRel = function (owningPathSegList, x) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL, \"h\", owningPathSegList);\n        this._x = x;\n      };\n      window.SVGPathSegLinetoHorizontalRel.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegLinetoHorizontalRel.prototype.toString = function () {\n        return \"[object SVGPathSegLinetoHorizontalRel]\";\n      };\n      window.SVGPathSegLinetoHorizontalRel.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._x}`;\n      };\n      window.SVGPathSegLinetoHorizontalRel.prototype.clone = function () {\n        return new window.SVGPathSegLinetoHorizontalRel(undefined, this._x);\n      };\n      Object.defineProperty(window.SVGPathSegLinetoHorizontalRel.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegLinetoVerticalAbs = function (owningPathSegList, y) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS, \"V\", owningPathSegList);\n        this._y = y;\n      };\n      window.SVGPathSegLinetoVerticalAbs.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegLinetoVerticalAbs.prototype.toString = function () {\n        return \"[object SVGPathSegLinetoVerticalAbs]\";\n      };\n      window.SVGPathSegLinetoVerticalAbs.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._y}`;\n      };\n      window.SVGPathSegLinetoVerticalAbs.prototype.clone = function () {\n        return new window.SVGPathSegLinetoVerticalAbs(undefined, this._y);\n      };\n      Object.defineProperty(window.SVGPathSegLinetoVerticalAbs.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegLinetoVerticalRel = function (owningPathSegList, y) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL, \"v\", owningPathSegList);\n        this._y = y;\n      };\n      window.SVGPathSegLinetoVerticalRel.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegLinetoVerticalRel.prototype.toString = function () {\n        return \"[object SVGPathSegLinetoVerticalRel]\";\n      };\n      window.SVGPathSegLinetoVerticalRel.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._y}`;\n      };\n      window.SVGPathSegLinetoVerticalRel.prototype.clone = function () {\n        return new window.SVGPathSegLinetoVerticalRel(undefined, this._y);\n      };\n      Object.defineProperty(window.SVGPathSegLinetoVerticalRel.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegCurvetoCubicSmoothAbs = function (owningPathSegList, x, y, x2, y2) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS, \"S\", owningPathSegList);\n        this._x = x;\n        this._y = y;\n        this._x2 = x2;\n        this._y2 = y2;\n      };\n      window.SVGPathSegCurvetoCubicSmoothAbs.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegCurvetoCubicSmoothAbs.prototype.toString = function () {\n        return \"[object SVGPathSegCurvetoCubicSmoothAbs]\";\n      };\n      window.SVGPathSegCurvetoCubicSmoothAbs.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._x2} ${this._y2} ${this._x} ${this._y}`;\n      };\n      window.SVGPathSegCurvetoCubicSmoothAbs.prototype.clone = function () {\n        return new window.SVGPathSegCurvetoCubicSmoothAbs(undefined, this._x, this._y, this._x2, this._y2);\n      };\n      Object.defineProperty(window.SVGPathSegCurvetoCubicSmoothAbs.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicSmoothAbs.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicSmoothAbs.prototype, \"x2\", {\n        get: function () {\n          return this._x2;\n        },\n        set: function (x2) {\n          this._x2 = x2;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicSmoothAbs.prototype, \"y2\", {\n        get: function () {\n          return this._y2;\n        },\n        set: function (y2) {\n          this._y2 = y2;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegCurvetoCubicSmoothRel = function (owningPathSegList, x, y, x2, y2) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL, \"s\", owningPathSegList);\n        this._x = x;\n        this._y = y;\n        this._x2 = x2;\n        this._y2 = y2;\n      };\n      window.SVGPathSegCurvetoCubicSmoothRel.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegCurvetoCubicSmoothRel.prototype.toString = function () {\n        return \"[object SVGPathSegCurvetoCubicSmoothRel]\";\n      };\n      window.SVGPathSegCurvetoCubicSmoothRel.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._x2} ${this._y2} ${this._x} ${this._y}`;\n      };\n      window.SVGPathSegCurvetoCubicSmoothRel.prototype.clone = function () {\n        return new window.SVGPathSegCurvetoCubicSmoothRel(undefined, this._x, this._y, this._x2, this._y2);\n      };\n      Object.defineProperty(window.SVGPathSegCurvetoCubicSmoothRel.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicSmoothRel.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicSmoothRel.prototype, \"x2\", {\n        get: function () {\n          return this._x2;\n        },\n        set: function (x2) {\n          this._x2 = x2;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoCubicSmoothRel.prototype, \"y2\", {\n        get: function () {\n          return this._y2;\n        },\n        set: function (y2) {\n          this._y2 = y2;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegCurvetoQuadraticSmoothAbs = function (owningPathSegList, x, y) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS, \"T\", owningPathSegList);\n        this._x = x;\n        this._y = y;\n      };\n      window.SVGPathSegCurvetoQuadraticSmoothAbs.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegCurvetoQuadraticSmoothAbs.prototype.toString = function () {\n        return \"[object SVGPathSegCurvetoQuadraticSmoothAbs]\";\n      };\n      window.SVGPathSegCurvetoQuadraticSmoothAbs.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._x} ${this._y}`;\n      };\n      window.SVGPathSegCurvetoQuadraticSmoothAbs.prototype.clone = function () {\n        return new window.SVGPathSegCurvetoQuadraticSmoothAbs(undefined, this._x, this._y);\n      };\n      Object.defineProperty(window.SVGPathSegCurvetoQuadraticSmoothAbs.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoQuadraticSmoothAbs.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathSegCurvetoQuadraticSmoothRel = function (owningPathSegList, x, y) {\n        window.SVGPathSeg.call(this, window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL, \"t\", owningPathSegList);\n        this._x = x;\n        this._y = y;\n      };\n      window.SVGPathSegCurvetoQuadraticSmoothRel.prototype = Object.create(window.SVGPathSeg.prototype);\n      window.SVGPathSegCurvetoQuadraticSmoothRel.prototype.toString = function () {\n        return \"[object SVGPathSegCurvetoQuadraticSmoothRel]\";\n      };\n      window.SVGPathSegCurvetoQuadraticSmoothRel.prototype._asPathString = function () {\n        return `${this.pathSegTypeAsLetter} ${this._x} ${this._y}`;\n      };\n      window.SVGPathSegCurvetoQuadraticSmoothRel.prototype.clone = function () {\n        return new window.SVGPathSegCurvetoQuadraticSmoothRel(undefined, this._x, this._y);\n      };\n      Object.defineProperty(window.SVGPathSegCurvetoQuadraticSmoothRel.prototype, \"x\", {\n        get: function () {\n          return this._x;\n        },\n        set: function (x) {\n          this._x = x;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegCurvetoQuadraticSmoothRel.prototype, \"y\", {\n        get: function () {\n          return this._y;\n        },\n        set: function (y) {\n          this._y = y;\n          this._segmentChanged();\n        },\n        enumerable: true\n      });\n      window.SVGPathElement.prototype.createSVGPathSegClosePath = function () {\n        return new window.SVGPathSegClosePath(undefined);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegMovetoAbs = function (x, y) {\n        return new window.SVGPathSegMovetoAbs(undefined, x, y);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegMovetoRel = function (x, y) {\n        return new window.SVGPathSegMovetoRel(undefined, x, y);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegLinetoAbs = function (x, y) {\n        return new window.SVGPathSegLinetoAbs(undefined, x, y);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegLinetoRel = function (x, y) {\n        return new window.SVGPathSegLinetoRel(undefined, x, y);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegCurvetoCubicAbs = function (x, y, x1, y1, x2, y2) {\n        return new window.SVGPathSegCurvetoCubicAbs(undefined, x, y, x1, y1, x2, y2);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegCurvetoCubicRel = function (x, y, x1, y1, x2, y2) {\n        return new window.SVGPathSegCurvetoCubicRel(undefined, x, y, x1, y1, x2, y2);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticAbs = function (x, y, x1, y1) {\n        return new window.SVGPathSegCurvetoQuadraticAbs(undefined, x, y, x1, y1);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticRel = function (x, y, x1, y1) {\n        return new window.SVGPathSegCurvetoQuadraticRel(undefined, x, y, x1, y1);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegArcAbs = function (x, y, r1, r2, angle, largeArcFlag, sweepFlag) {\n        return new window.SVGPathSegArcAbs(undefined, x, y, r1, r2, angle, largeArcFlag, sweepFlag);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegArcRel = function (x, y, r1, r2, angle, largeArcFlag, sweepFlag) {\n        return new window.SVGPathSegArcRel(undefined, x, y, r1, r2, angle, largeArcFlag, sweepFlag);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegLinetoHorizontalAbs = function (x) {\n        return new window.SVGPathSegLinetoHorizontalAbs(undefined, x);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegLinetoHorizontalRel = function (x) {\n        return new window.SVGPathSegLinetoHorizontalRel(undefined, x);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegLinetoVerticalAbs = function (y) {\n        return new window.SVGPathSegLinetoVerticalAbs(undefined, y);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegLinetoVerticalRel = function (y) {\n        return new window.SVGPathSegLinetoVerticalRel(undefined, y);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegCurvetoCubicSmoothAbs = function (x, y, x2, y2) {\n        return new window.SVGPathSegCurvetoCubicSmoothAbs(undefined, x, y, x2, y2);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegCurvetoCubicSmoothRel = function (x, y, x2, y2) {\n        return new window.SVGPathSegCurvetoCubicSmoothRel(undefined, x, y, x2, y2);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticSmoothAbs = function (x, y) {\n        return new window.SVGPathSegCurvetoQuadraticSmoothAbs(undefined, x, y);\n      };\n      window.SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticSmoothRel = function (x, y) {\n        return new window.SVGPathSegCurvetoQuadraticSmoothRel(undefined, x, y);\n      };\n      if (!(\"getPathSegAtLength\" in window.SVGPathElement.prototype)) {\n        window.SVGPathElement.prototype.getPathSegAtLength = function (distance) {\n          if (distance === undefined || !isFinite(distance)) throw \"Invalid arguments.\";\n          const measurementElement = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n          measurementElement.setAttribute(\"d\", this.getAttribute(\"d\"));\n          let lastPathSegment = measurementElement.pathSegList.numberOfItems - 1;\n          if (lastPathSegment <= 0) return 0;\n          do {\n            measurementElement.pathSegList.removeItem(lastPathSegment);\n            if (distance > measurementElement.getTotalLength()) break;\n            lastPathSegment--;\n          } while (lastPathSegment > 0);\n          return lastPathSegment;\n        };\n      }\n    }\n    if (!(\"SVGPathSegList\" in window) || !(\"appendItem\" in window.SVGPathSegList.prototype)) {\n      window.SVGPathSegList = function (pathElement) {\n        this._pathElement = pathElement;\n        this._list = this._parsePath(this._pathElement.getAttribute(\"d\"));\n        this._mutationObserverConfig = {\n          attributes: true,\n          attributeFilter: [\"d\"]\n        };\n        this._pathElementMutationObserver = new MutationObserver(this._updateListFromPathMutations.bind(this));\n        this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);\n      };\n      window.SVGPathSegList.prototype.classname = \"SVGPathSegList\";\n      Object.defineProperty(window.SVGPathSegList.prototype, \"numberOfItems\", {\n        get: function () {\n          this._checkPathSynchronizedToList();\n          return this._list.length;\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathSegList.prototype, \"length\", {\n        get: function () {\n          this._checkPathSynchronizedToList();\n          return this._list.length;\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathElement.prototype, \"pathSegList\", {\n        get: function () {\n          if (!this._pathSegList) this._pathSegList = new window.SVGPathSegList(this);\n          return this._pathSegList;\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathElement.prototype, \"normalizedPathSegList\", {\n        get: function () {\n          return this.pathSegList;\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathElement.prototype, \"animatedPathSegList\", {\n        get: function () {\n          return this.pathSegList;\n        },\n        enumerable: true\n      });\n      Object.defineProperty(window.SVGPathElement.prototype, \"animatedNormalizedPathSegList\", {\n        get: function () {\n          return this.pathSegList;\n        },\n        enumerable: true\n      });\n      window.SVGPathSegList.prototype._checkPathSynchronizedToList = function () {\n        this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords());\n      };\n      window.SVGPathSegList.prototype._updateListFromPathMutations = function (mutationRecords) {\n        if (!this._pathElement) return;\n        let hasPathMutations = false;\n        mutationRecords.forEach(function (record) {\n          if (record.attributeName == \"d\") hasPathMutations = true;\n        });\n        if (hasPathMutations) this._list = this._parsePath(this._pathElement.getAttribute(\"d\"));\n      };\n      window.SVGPathSegList.prototype._writeListToPath = function () {\n        this._pathElementMutationObserver.disconnect();\n        this._pathElement.setAttribute(\"d\", window.SVGPathSegList._pathSegArrayAsString(this._list));\n        this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);\n      };\n      window.SVGPathSegList.prototype.segmentChanged = function () {\n        this._writeListToPath();\n      };\n      window.SVGPathSegList.prototype.clear = function () {\n        this._checkPathSynchronizedToList();\n        this._list.forEach(function (pathSeg) {\n          pathSeg._owningPathSegList = null;\n        });\n        this._list = [];\n        this._writeListToPath();\n      };\n      window.SVGPathSegList.prototype.initialize = function (newItem) {\n        this._checkPathSynchronizedToList();\n        this._list = [newItem];\n        newItem._owningPathSegList = this;\n        this._writeListToPath();\n        return newItem;\n      };\n      window.SVGPathSegList.prototype._checkValidIndex = function (index) {\n        if (isNaN(index) || index < 0 || index >= this.numberOfItems) throw \"INDEX_SIZE_ERR\";\n      };\n      window.SVGPathSegList.prototype.getItem = function (index) {\n        this._checkPathSynchronizedToList();\n        this._checkValidIndex(index);\n        return this._list[index];\n      };\n      window.SVGPathSegList.prototype.insertItemBefore = function (newItem, index) {\n        this._checkPathSynchronizedToList();\n        if (index > this.numberOfItems) index = this.numberOfItems;\n        if (newItem._owningPathSegList) {\n          newItem = newItem.clone();\n        }\n        this._list.splice(index, 0, newItem);\n        newItem._owningPathSegList = this;\n        this._writeListToPath();\n        return newItem;\n      };\n      window.SVGPathSegList.prototype.replaceItem = function (newItem, index) {\n        this._checkPathSynchronizedToList();\n        if (newItem._owningPathSegList) {\n          newItem = newItem.clone();\n        }\n        this._checkValidIndex(index);\n        this._list[index] = newItem;\n        newItem._owningPathSegList = this;\n        this._writeListToPath();\n        return newItem;\n      };\n      window.SVGPathSegList.prototype.removeItem = function (index) {\n        this._checkPathSynchronizedToList();\n        this._checkValidIndex(index);\n        const item = this._list[index];\n        this._list.splice(index, 1);\n        this._writeListToPath();\n        return item;\n      };\n      window.SVGPathSegList.prototype.appendItem = function (newItem) {\n        this._checkPathSynchronizedToList();\n        if (newItem._owningPathSegList) {\n          newItem = newItem.clone();\n        }\n        this._list.push(newItem);\n        newItem._owningPathSegList = this;\n        this._writeListToPath();\n        return newItem;\n      };\n      window.SVGPathSegList._pathSegArrayAsString = function (pathSegArray) {\n        let string = \"\";\n        let first = true;\n        pathSegArray.forEach(function (pathSeg) {\n          if (first) {\n            first = false;\n            string += pathSeg._asPathString();\n          } else {\n            string += ` ${pathSeg._asPathString()}`;\n          }\n        });\n        return string;\n      };\n      window.SVGPathSegList.prototype._parsePath = function (string) {\n        if (!string?.length) return [];\n        const owningPathSegList = this;\n        const Builder = function () {\n          this.pathSegList = [];\n        };\n        Builder.prototype.appendSegment = function (pathSeg) {\n          this.pathSegList.push(pathSeg);\n        };\n        const Source = function (string) {\n          this._string = string;\n          this._currentIndex = 0;\n          this._endIndex = this._string.length;\n          this._previousCommand = window.SVGPathSeg.PATHSEG_UNKNOWN;\n          this._skipOptionalSpaces();\n        };\n        Source.prototype._isCurrentSpace = function () {\n          const character = this._string[this._currentIndex];\n          return character <= \" \" && (character == \" \" || character == \"\\n\" || character == \"\\t\" || character == \"\\r\" || character == \"\\f\");\n        };\n        Source.prototype._skipOptionalSpaces = function () {\n          while (this._currentIndex < this._endIndex && this._isCurrentSpace()) this._currentIndex++;\n          return this._currentIndex < this._endIndex;\n        };\n        Source.prototype._skipOptionalSpacesOrDelimiter = function () {\n          if (this._currentIndex < this._endIndex && !this._isCurrentSpace() && this._string.charAt(this._currentIndex) != \",\") return false;\n          if (this._skipOptionalSpaces()) {\n            if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) == \",\") {\n              this._currentIndex++;\n              this._skipOptionalSpaces();\n            }\n          }\n          return this._currentIndex < this._endIndex;\n        };\n        Source.prototype.hasMoreData = function () {\n          return this._currentIndex < this._endIndex;\n        };\n        Source.prototype.peekSegmentType = function () {\n          const lookahead = this._string[this._currentIndex];\n          return this._pathSegTypeFromChar(lookahead);\n        };\n        Source.prototype._pathSegTypeFromChar = function (lookahead) {\n          switch (lookahead) {\n            case \"Z\":\n            case \"z\":\n              return window.SVGPathSeg.PATHSEG_CLOSEPATH;\n            case \"M\":\n              return window.SVGPathSeg.PATHSEG_MOVETO_ABS;\n            case \"m\":\n              return window.SVGPathSeg.PATHSEG_MOVETO_REL;\n            case \"L\":\n              return window.SVGPathSeg.PATHSEG_LINETO_ABS;\n            case \"l\":\n              return window.SVGPathSeg.PATHSEG_LINETO_REL;\n            case \"C\":\n              return window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS;\n            case \"c\":\n              return window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL;\n            case \"Q\":\n              return window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS;\n            case \"q\":\n              return window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL;\n            case \"A\":\n              return window.SVGPathSeg.PATHSEG_ARC_ABS;\n            case \"a\":\n              return window.SVGPathSeg.PATHSEG_ARC_REL;\n            case \"H\":\n              return window.SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS;\n            case \"h\":\n              return window.SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL;\n            case \"V\":\n              return window.SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS;\n            case \"v\":\n              return window.SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL;\n            case \"S\":\n              return window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS;\n            case \"s\":\n              return window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL;\n            case \"T\":\n              return window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS;\n            case \"t\":\n              return window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL;\n            default:\n              return window.SVGPathSeg.PATHSEG_UNKNOWN;\n          }\n        };\n        Source.prototype._nextCommandHelper = function (lookahead, previousCommand) {\n          if ((lookahead == \"+\" || lookahead == \"-\" || lookahead == \".\" || lookahead >= \"0\" && lookahead <= \"9\") && previousCommand != window.SVGPathSeg.PATHSEG_CLOSEPATH) {\n            if (previousCommand == window.SVGPathSeg.PATHSEG_MOVETO_ABS) return window.SVGPathSeg.PATHSEG_LINETO_ABS;\n            if (previousCommand == window.SVGPathSeg.PATHSEG_MOVETO_REL) return window.SVGPathSeg.PATHSEG_LINETO_REL;\n            return previousCommand;\n          }\n          return window.SVGPathSeg.PATHSEG_UNKNOWN;\n        };\n        Source.prototype.initialCommandIsMoveTo = function () {\n          if (!this.hasMoreData()) return true;\n          const command = this.peekSegmentType();\n          return command == window.SVGPathSeg.PATHSEG_MOVETO_ABS || command == window.SVGPathSeg.PATHSEG_MOVETO_REL;\n        };\n        Source.prototype._parseNumber = function () {\n          let exponent = 0;\n          let integer = 0;\n          let frac = 1;\n          let decimal = 0;\n          let sign = 1;\n          let expsign = 1;\n          const startIndex = this._currentIndex;\n          this._skipOptionalSpaces();\n          if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) == \"+\") this._currentIndex++;else if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) == \"-\") {\n            this._currentIndex++;\n            sign = -1;\n          }\n          if (this._currentIndex == this._endIndex || (this._string.charAt(this._currentIndex) < \"0\" || this._string.charAt(this._currentIndex) > \"9\") && this._string.charAt(this._currentIndex) != \".\") return undefined;\n          const startIntPartIndex = this._currentIndex;\n          while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= \"0\" && this._string.charAt(this._currentIndex) <= \"9\") this._currentIndex++;\n          if (this._currentIndex != startIntPartIndex) {\n            let scanIntPartIndex = this._currentIndex - 1;\n            let multiplier = 1;\n            while (scanIntPartIndex >= startIntPartIndex) {\n              integer += multiplier * (this._string.charAt(scanIntPartIndex--) - \"0\");\n              multiplier *= 10;\n            }\n          }\n          if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) == \".\") {\n            this._currentIndex++;\n            if (this._currentIndex >= this._endIndex || this._string.charAt(this._currentIndex) < \"0\" || this._string.charAt(this._currentIndex) > \"9\") return undefined;\n            while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= \"0\" && this._string.charAt(this._currentIndex) <= \"9\") {\n              frac *= 10;\n              decimal += (this._string.charAt(this._currentIndex) - \"0\") / frac;\n              this._currentIndex += 1;\n            }\n          }\n          if (this._currentIndex != startIndex && this._currentIndex + 1 < this._endIndex && (this._string.charAt(this._currentIndex) == \"e\" || this._string.charAt(this._currentIndex) == \"E\") && this._string.charAt(this._currentIndex + 1) != \"x\" && this._string.charAt(this._currentIndex + 1) != \"m\") {\n            this._currentIndex++;\n            if (this._string.charAt(this._currentIndex) == \"+\") {\n              this._currentIndex++;\n            } else if (this._string.charAt(this._currentIndex) == \"-\") {\n              this._currentIndex++;\n              expsign = -1;\n            }\n            if (this._currentIndex >= this._endIndex || this._string.charAt(this._currentIndex) < \"0\" || this._string.charAt(this._currentIndex) > \"9\") return undefined;\n            while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= \"0\" && this._string.charAt(this._currentIndex) <= \"9\") {\n              exponent *= 10;\n              exponent += this._string.charAt(this._currentIndex) - \"0\";\n              this._currentIndex++;\n            }\n          }\n          let number = integer + decimal;\n          number *= sign;\n          if (exponent) number *= Math.pow(10, expsign * exponent);\n          if (startIndex == this._currentIndex) return undefined;\n          this._skipOptionalSpacesOrDelimiter();\n          return number;\n        };\n        Source.prototype._parseArcFlag = function () {\n          if (this._currentIndex >= this._endIndex) return undefined;\n          let flag = false;\n          const flagChar = this._string.charAt(this._currentIndex++);\n          if (flagChar == \"0\") flag = false;else if (flagChar == \"1\") flag = true;else return undefined;\n          this._skipOptionalSpacesOrDelimiter();\n          return flag;\n        };\n        Source.prototype.parseSegment = function () {\n          const lookahead = this._string[this._currentIndex];\n          let command = this._pathSegTypeFromChar(lookahead);\n          if (command == window.SVGPathSeg.PATHSEG_UNKNOWN) {\n            if (this._previousCommand == window.SVGPathSeg.PATHSEG_UNKNOWN) return null;\n            command = this._nextCommandHelper(lookahead, this._previousCommand);\n            if (command == window.SVGPathSeg.PATHSEG_UNKNOWN) return null;\n          } else {\n            this._currentIndex++;\n          }\n          this._previousCommand = command;\n          let points;\n          switch (command) {\n            case window.SVGPathSeg.PATHSEG_MOVETO_REL:\n              return new window.SVGPathSegMovetoRel(owningPathSegList, this._parseNumber(), this._parseNumber());\n            case window.SVGPathSeg.PATHSEG_MOVETO_ABS:\n              return new window.SVGPathSegMovetoAbs(owningPathSegList, this._parseNumber(), this._parseNumber());\n            case window.SVGPathSeg.PATHSEG_LINETO_REL:\n              return new window.SVGPathSegLinetoRel(owningPathSegList, this._parseNumber(), this._parseNumber());\n            case window.SVGPathSeg.PATHSEG_LINETO_ABS:\n              return new window.SVGPathSegLinetoAbs(owningPathSegList, this._parseNumber(), this._parseNumber());\n            case window.SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:\n              return new window.SVGPathSegLinetoHorizontalRel(owningPathSegList, this._parseNumber());\n            case window.SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:\n              return new window.SVGPathSegLinetoHorizontalAbs(owningPathSegList, this._parseNumber());\n            case window.SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL:\n              return new window.SVGPathSegLinetoVerticalRel(owningPathSegList, this._parseNumber());\n            case window.SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS:\n              return new window.SVGPathSegLinetoVerticalAbs(owningPathSegList, this._parseNumber());\n            case window.SVGPathSeg.PATHSEG_CLOSEPATH:\n              this._skipOptionalSpaces();\n              return new window.SVGPathSegClosePath(owningPathSegList);\n            case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL:\n              points = {\n                x1: this._parseNumber(),\n                y1: this._parseNumber(),\n                x2: this._parseNumber(),\n                y2: this._parseNumber(),\n                x: this._parseNumber(),\n                y: this._parseNumber()\n              };\n              return new window.SVGPathSegCurvetoCubicRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2);\n            case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:\n              points = {\n                x1: this._parseNumber(),\n                y1: this._parseNumber(),\n                x2: this._parseNumber(),\n                y2: this._parseNumber(),\n                x: this._parseNumber(),\n                y: this._parseNumber()\n              };\n              return new window.SVGPathSegCurvetoCubicAbs(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2);\n            case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:\n              points = {\n                x2: this._parseNumber(),\n                y2: this._parseNumber(),\n                x: this._parseNumber(),\n                y: this._parseNumber()\n              };\n              return new window.SVGPathSegCurvetoCubicSmoothRel(owningPathSegList, points.x, points.y, points.x2, points.y2);\n            case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:\n              points = {\n                x2: this._parseNumber(),\n                y2: this._parseNumber(),\n                x: this._parseNumber(),\n                y: this._parseNumber()\n              };\n              return new window.SVGPathSegCurvetoCubicSmoothAbs(owningPathSegList, points.x, points.y, points.x2, points.y2);\n            case window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:\n              points = {\n                x1: this._parseNumber(),\n                y1: this._parseNumber(),\n                x: this._parseNumber(),\n                y: this._parseNumber()\n              };\n              return new window.SVGPathSegCurvetoQuadraticRel(owningPathSegList, points.x, points.y, points.x1, points.y1);\n            case window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:\n              points = {\n                x1: this._parseNumber(),\n                y1: this._parseNumber(),\n                x: this._parseNumber(),\n                y: this._parseNumber()\n              };\n              return new window.SVGPathSegCurvetoQuadraticAbs(owningPathSegList, points.x, points.y, points.x1, points.y1);\n            case window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:\n              return new window.SVGPathSegCurvetoQuadraticSmoothRel(owningPathSegList, this._parseNumber(), this._parseNumber());\n            case window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:\n              return new window.SVGPathSegCurvetoQuadraticSmoothAbs(owningPathSegList, this._parseNumber(), this._parseNumber());\n            case window.SVGPathSeg.PATHSEG_ARC_REL:\n              points = {\n                x1: this._parseNumber(),\n                y1: this._parseNumber(),\n                arcAngle: this._parseNumber(),\n                arcLarge: this._parseArcFlag(),\n                arcSweep: this._parseArcFlag(),\n                x: this._parseNumber(),\n                y: this._parseNumber()\n              };\n              return new window.SVGPathSegArcRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.arcAngle, points.arcLarge, points.arcSweep);\n            case window.SVGPathSeg.PATHSEG_ARC_ABS:\n              points = {\n                x1: this._parseNumber(),\n                y1: this._parseNumber(),\n                arcAngle: this._parseNumber(),\n                arcLarge: this._parseArcFlag(),\n                arcSweep: this._parseArcFlag(),\n                x: this._parseNumber(),\n                y: this._parseNumber()\n              };\n              return new window.SVGPathSegArcAbs(owningPathSegList, points.x, points.y, points.x1, points.y1, points.arcAngle, points.arcLarge, points.arcSweep);\n            default:\n              throw \"Unknown path seg type.\";\n          }\n        };\n        const builder = new Builder();\n        const source = new Source(string);\n        if (!source.initialCommandIsMoveTo()) return [];\n        while (source.hasMoreData()) {\n          const pathSeg = source.parseSegment();\n          if (!pathSeg) return [];\n          builder.appendSegment(pathSeg);\n        }\n        return builder.pathSegList;\n      };\n    }\n  } catch (e) {\n    console.warn(\"An error occurred in tsParticles pathseg polyfill. If the Polygon Mask is not working, please open an issue here: https://github.com/tsparticles/tsparticles\", e);\n  }\n})();\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/pathseg.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/utils.js"
+/*!*******************************!*\
+  !*** ./dist/browser/utils.js ***!
+  \*******************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   calcClosestPointOnSegment: () => (/* binding */ calcClosestPointOnSegment),\n/* harmony export */   drawPolygonMask: () => (/* binding */ drawPolygonMask),\n/* harmony export */   drawPolygonMaskPath: () => (/* binding */ drawPolygonMaskPath),\n/* harmony export */   parsePaths: () => (/* binding */ parsePaths),\n/* harmony export */   segmentBounce: () => (/* binding */ segmentBounce)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst squareExp = 2,\n  inSegmentRange = {\n    min: 0,\n    max: 1\n  },\n  double = 2;\nfunction drawPolygonMask(engine, context, rawData, stroke, hdr = false) {\n  const color = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(engine, stroke.color);\n  if (!color) {\n    return;\n  }\n  const firstIndex = 0,\n    firstItem = rawData[firstIndex];\n  if (!firstItem) {\n    return;\n  }\n  context.beginPath();\n  context.moveTo(firstItem.x, firstItem.y);\n  for (const item of rawData) {\n    context.lineTo(item.x, item.y);\n  }\n  context.closePath();\n  context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(color, hdr);\n  context.lineWidth = stroke.width;\n  context.stroke();\n}\nfunction drawPolygonMaskPath(engine, context, path, stroke, position, hdr = false) {\n  const defaultTransform = {\n    a: 1,\n    b: 0,\n    c: 0,\n    d: 1\n  };\n  context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, position.x, position.y);\n  const color = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(engine, stroke.color);\n  if (!color) {\n    return;\n  }\n  context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(color, hdr, stroke.opacity);\n  context.lineWidth = stroke.width;\n  context.stroke(path);\n  context.resetTransform();\n}\nfunction parsePaths(paths, scale, offset) {\n  const res = [],\n    defaultCount = 0;\n  for (const path of paths) {\n    const segments = path.element.pathSegList,\n      len = segments?.numberOfItems ?? defaultCount,\n      p = {\n        x: 0,\n        y: 0\n      };\n    for (let i = 0; i < len; i++) {\n      const segment = segments?.getItem(i),\n        svgPathSeg = globalThis.SVGPathSeg;\n      switch (segment?.pathSegType) {\n        case svgPathSeg.PATHSEG_MOVETO_ABS:\n        case svgPathSeg.PATHSEG_LINETO_ABS:\n        case svgPathSeg.PATHSEG_CURVETO_CUBIC_ABS:\n        case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:\n        case svgPathSeg.PATHSEG_ARC_ABS:\n        case svgPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:\n        case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:\n          {\n            const absSeg = segment;\n            p.x = absSeg.x;\n            p.y = absSeg.y;\n            break;\n          }\n        case svgPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:\n          p.x = segment.x;\n          break;\n        case svgPathSeg.PATHSEG_LINETO_VERTICAL_ABS:\n          p.y = segment.y;\n          break;\n        case svgPathSeg.PATHSEG_LINETO_REL:\n        case svgPathSeg.PATHSEG_MOVETO_REL:\n        case svgPathSeg.PATHSEG_CURVETO_CUBIC_REL:\n        case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:\n        case svgPathSeg.PATHSEG_ARC_REL:\n        case svgPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:\n        case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:\n          {\n            const relSeg = segment;\n            p.x += relSeg.x;\n            p.y += relSeg.y;\n            break;\n          }\n        case svgPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:\n          p.x += segment.x;\n          break;\n        case svgPathSeg.PATHSEG_LINETO_VERTICAL_REL:\n          p.y += segment.y;\n          break;\n        case svgPathSeg.PATHSEG_UNKNOWN:\n        case svgPathSeg.PATHSEG_CLOSEPATH:\n          continue;\n      }\n      res.push({\n        x: p.x * scale + offset.x,\n        y: p.y * scale + offset.y\n      });\n    }\n  }\n  return res;\n}\nfunction calcClosestPointOnSegment(s1, s2, pos) {\n  const {\n      dx: dx1,\n      dy: dy1\n    } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos, s1),\n    {\n      dx: dx2,\n      dy: dy2\n    } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(s2, s1),\n    t = (dx1 * dx2 + dy1 * dy2) / (dx2 ** squareExp + dy2 ** squareExp),\n    res = {\n      x: s1.x + dx2 * t,\n      y: s1.y + dy2 * t,\n      isOnSegment: t >= inSegmentRange.min && t <= inSegmentRange.max\n    };\n  if (t < inSegmentRange.min) {\n    res.x = s1.x;\n    res.y = s1.y;\n  } else if (t > inSegmentRange.max) {\n    res.x = s2.x;\n    res.y = s2.y;\n  }\n  return res;\n}\nfunction segmentBounce(start, stop, velocity) {\n  const {\n      dx,\n      dy\n    } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(start, stop),\n    wallAngle = Math.atan2(dy, dx),\n    wallNormal = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)),\n    d = double * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);\n  wallNormal.multTo(d);\n  velocity.subFrom(wallNormal);\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-polygon-mask/./dist/browser/utils.js?\n}");
+
+/***/ }
+
+}]);

package/esm/PolygonMaskInstance.js

@@ -1,8 +1,9 @@
-import { OutModeDirection, deepExtend, errorPrefix, getDistance, getDistances, getRandom, isArray, isString, itemFromArray, percentDenominator, } from "@tsparticles/engine";
+import "./pathseg.js";
+import { OutModeDirection, deepExtend, getDistance, getDistances, getRandom, isArray, isString, itemFromArray, percentDenominator, safeDocument, } from "@tsparticles/engine";
 import { calcClosestPointOnSegment, drawPolygonMask, drawPolygonMaskPath, parsePaths, segmentBounce } from "./utils.js";
 import { PolygonMaskInlineArrangement } from "./Enums/PolygonMaskInlineArrangement.js";
 import { PolygonMaskType } from "./Enums/PolygonMaskType.js";
-const noPolygonDataLoaded = `${errorPrefix} No polygon data loaded.`, noPolygonFound = `${errorPrefix} No polygon found, you need to specify SVG url in config.`, origin = {
+const noPolygonDataLoaded = `No polygon data loaded.`, noPolygonFound = `No polygon found, you need to specify SVG url in config.`, origin = {
     x: 0,
     y: 0,
 }, half = 0.5, double = 2;
@@ -19,7 +20,11 @@ export class PolygonMaskInstance {
             const canvasSize = container.canvas.size, x = position?.x ?? getRandom() * canvasSize.width, y = position?.y ?? getRandom() * canvasSize.height, indexOffset = 1;
             let inside = false;
             for (let i = 0, j = this.raw.length - indexOffset; i < this.raw.length; j = i++) {
-                const pi = this.raw[i], pj = this.raw[j], intersect = pi.y > y !== pj.y > y && x < ((pj.x - pi.x) * (y - pi.y)) / (pj.y - pi.y) + pi.x;
+                const pi = this.raw[i], pj = this.raw[j];
+                if (!pi || !pj) {
+                    continue;
+                }
+                const intersect = pi.y > y !== pj.y > y && x < ((pj.x - pi.x) * (y - pi.y)) / (pj.y - pi.y) + pi.x;
                 if (intersect) {
                     inside = !inside;
                 }
@@ -28,7 +33,7 @@ export class PolygonMaskInstance {
                 return inside;
             }
             else {
-                return options.type === PolygonMaskType.outside ? !inside : false;
+                return !inside;
             }
         };
         this._createPath2D = () => {
@@ -37,16 +42,11 @@ export class PolygonMaskInstance {
                 return;
             }
             for (const path of this.paths) {
-                const pathData = path.element?.getAttribute("d");
+                const pathData = path.element.getAttribute("d");
                 if (pathData) {
-                    const path2d = new Path2D(pathData), matrix = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix(), finalPath = new Path2D(), transform = matrix.scale(this._scale);
-                    if (finalPath.addPath) {
-                        finalPath.addPath(path2d, transform);
-                        path.path2d = finalPath;
-                    }
-                    else {
-                        delete path.path2d;
-                    }
+                    const path2d = new Path2D(pathData), matrix = safeDocument().createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix(), finalPath = new Path2D(), transform = matrix.scale(this._scale);
+                    finalPath.addPath(path2d, transform);
+                    path.path2d = finalPath;
                 }
                 else {
                     delete path.path2d;
@@ -56,6 +56,9 @@ export class PolygonMaskInstance {
                 }
                 path.path2d = new Path2D();
                 const firstIndex = 0, firstPoint = this.raw[firstIndex];
+                if (!firstPoint) {
+                    continue;
+                }
                 path.path2d.moveTo(firstPoint.x, firstPoint.y);
                 this.raw.forEach((pos, i) => {
                     if (i > firstIndex) {
@@ -76,7 +79,7 @@ export class PolygonMaskInstance {
             }
             const req = await fetch(url);
             if (!req.ok) {
-                throw new Error(`${errorPrefix} occurred during polygon mask download`);
+                throw new Error(`Error occurred during polygon mask download`);
             }
             return this._parseSvgPath(await req.text(), force);
         };
@@ -122,6 +125,9 @@ export class PolygonMaskInstance {
                 throw new Error(noPolygonDataLoaded);
             }
             const coords = this.raw[index % this.raw.length];
+            if (!coords) {
+                return;
+            }
             return {
                 x: coords.x,
                 y: coords.y,
@@ -132,6 +138,9 @@ export class PolygonMaskInstance {
                 throw new Error(noPolygonDataLoaded);
             }
             const coords = itemFromArray(this.raw);
+            if (!coords) {
+                return;
+            }
             return {
                 x: coords.x,
                 y: coords.y,
@@ -145,7 +154,11 @@ export class PolygonMaskInstance {
             if (!this.raw?.length || !this.paths?.length) {
                 throw new Error(noPolygonDataLoaded);
             }
-            const path = itemFromArray(this.paths), offset = 1, distance = Math.floor(getRandom() * path.length) + offset, point = path.element.getPointAtLength(distance), scale = this._scale;
+            const path = itemFromArray(this.paths);
+            if (!path) {
+                return;
+            }
+            const offset = 1, distance = Math.floor(getRandom() * path.length) + offset, point = path.element.getPointAtLength(distance), scale = this._scale;
             return {
                 x: point.x * scale + (this.offset?.x ?? origin.x),
                 y: point.y * scale + (this.offset?.y ?? origin.y),
@@ -168,7 +181,7 @@ export class PolygonMaskInstance {
                 else {
                     const getPath = (p) => `<path d="${p}" />`, path = isArray(data.path) ? data.path.map(getPath).join("") : getPath(data.path);
                     const namespaces = 'xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"';
-                    svg = `<svg ${namespaces} width="${data.size.width}" height="${data.size.height}">${path}</svg>`;
+                    svg = `<svg ${namespaces} width="${data.size.width.toString()}" height="${data.size.height.toString()}">${path}</svg>`;
                 }
                 this.raw = this._parseSvgPath(svg, force);
             }
@@ -187,6 +200,9 @@ export class PolygonMaskInstance {
                 return;
             }
             const parser = new DOMParser(), doc = parser.parseFromString(xml, "image/svg+xml"), firstIndex = 0, svg = doc.getElementsByTagName("svg")[firstIndex];
+            if (!svg) {
+                return;
+            }
             let svgPaths = svg.getElementsByTagName("path");
             if (!svgPaths.length) {
                 svgPaths = doc.getElementsByTagName("path");
@@ -214,7 +230,7 @@ export class PolygonMaskInstance {
             };
             return parsePaths(this.paths, scale, this.offset);
         };
-        this._polygonBounce = (particle, delta, direction) => {
+        this._polygonBounce = (particle, _delta, direction) => {
             const options = this._container.actualOptions.polygon;
             if (!this.raw || !options?.enable || direction !== OutModeDirection.top) {
                 return false;
@@ -224,6 +240,9 @@ export class PolygonMaskInstance {
                 const pos = particle.getPosition(), radius = particle.getRadius(), offset = 1;
                 for (let i = 0, j = this.raw.length - offset; i < this.raw.length; j = i++) {
                     const pi = this.raw[i], pj = this.raw[j];
+                    if (!pi || !pj) {
+                        continue;
+                    }
                     closest = calcClosestPointOnSegment(pi, pj, pos);
                     const dist = getDistances(pos, closest);
                     [dx, dy] = [dist.dx, dist.dy];
@@ -246,7 +265,7 @@ export class PolygonMaskInstance {
                     return true;
                 }
             }
-            else if (options.type === PolygonMaskType.inline && particle.initialPosition) {
+            else if (options.type === PolygonMaskType.inline) {
                 const dist = getDistance(particle.initialPosition, particle.getPosition()), { velocity } = particle;
                 if (dist > this._moveRadius) {
                     velocity.x = velocity.y * half - velocity.x;
@@ -324,14 +343,11 @@ export class PolygonMaskInstance {
         const rawData = this.raw;
         for (const path of this.paths) {
             const path2d = path.path2d;
-            if (!context) {
-                continue;
-            }
             if (path2d && this.offset) {
-                drawPolygonMaskPath(this._engine, context, path2d, polygonDraw.stroke, this.offset);
+                drawPolygonMaskPath(this._engine, context, path2d, polygonDraw.stroke, this.offset, this._container.hdr);
             }
             else if (rawData) {
-                drawPolygonMask(this._engine, context, rawData, polygonDraw.stroke);
+                drawPolygonMask(this._engine, context, rawData, polygonDraw.stroke, this._container.hdr);
             }
         }
     }
@@ -354,7 +370,7 @@ export class PolygonMaskInstance {
         if (!(options?.enable && (this.raw?.length ?? defaultLength) > defaultLength)) {
             return;
         }
-        return deepExtend({}, position ? position : this._randomPoint());
+        return deepExtend({}, position ?? this._randomPoint());
     }
     particlesInitialization() {
         const options = this._container.actualOptions.polygon;

package/esm/index.js

@@ -1,8 +1,9 @@
-import "./pathseg.js";
-import { PolygonMaskPlugin } from "./PolygonMaskPlugin.js";
-export async function loadPolygonMaskPlugin(engine, refresh = true) {
-    engine.checkVersion("3.9.1");
-    await engine.addPlugin(new PolygonMaskPlugin(engine), refresh);
+export function loadPolygonMaskPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.1");
+    engine.register(async (e) => {
+        const { PolygonMaskPlugin } = await import("./PolygonMaskPlugin.js");
+        e.addPlugin(new PolygonMaskPlugin(engine));
+    });
 }
 export * from "./Enums/PolygonMaskInlineArrangement.js";
 export * from "./Enums/PolygonMaskMoveType.js";

package/esm/pathseg.js

@@ -1147,7 +1147,7 @@
                 return string;
             };
             window.SVGPathSegList.prototype._parsePath = function (string) {
-                if (!string || !string.length)
+                if (!string?.length)
                     return [];
                 const owningPathSegList = this;
                 const Builder = function () {

package/esm/utils.js

@@ -3,23 +3,26 @@ const squareExp = 2, inSegmentRange = {
     min: 0,
     max: 1,
 }, double = 2;
-export function drawPolygonMask(engine, context, rawData, stroke) {
+export function drawPolygonMask(engine, context, rawData, stroke, hdr = false) {
     const color = rangeColorToRgb(engine, stroke.color);
     if (!color) {
         return;
     }
     const firstIndex = 0, firstItem = rawData[firstIndex];
+    if (!firstItem) {
+        return;
+    }
     context.beginPath();
     context.moveTo(firstItem.x, firstItem.y);
     for (const item of rawData) {
         context.lineTo(item.x, item.y);
     }
     context.closePath();
-    context.strokeStyle = getStyleFromRgb(color);
+    context.strokeStyle = getStyleFromRgb(color, hdr);
     context.lineWidth = stroke.width;
     context.stroke();
 }
-export function drawPolygonMaskPath(engine, context, path, stroke, position) {
+export function drawPolygonMaskPath(engine, context, path, stroke, position, hdr = false) {
     const defaultTransform = {
         a: 1,
         b: 0,
@@ -31,7 +34,7 @@ export function drawPolygonMaskPath(engine, context, path, stroke, position) {
     if (!color) {
         return;
     }
-    context.strokeStyle = getStyleFromRgb(color, stroke.opacity);
+    context.strokeStyle = getStyleFromRgb(color, hdr, stroke.opacity);
     context.lineWidth = stroke.width;
     context.stroke(path);
     context.resetTransform();
@@ -44,7 +47,7 @@ export function parsePaths(paths, scale, offset) {
             y: 0,
         };
         for (let i = 0; i < len; i++) {
-            const segment = segments?.getItem(i), svgPathSeg = window.SVGPathSeg;
+            const segment = segments?.getItem(i), svgPathSeg = globalThis.SVGPathSeg;
             switch (segment?.pathSegType) {
                 case svgPathSeg.PATHSEG_MOVETO_ABS:
                 case svgPathSeg.PATHSEG_LINETO_ABS:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-polygon-mask",
-  "version": "3.9.1",
+  "version": "4.0.0-alpha.1",
   "description": "tsParticles polygon mask plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -88,9 +88,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "3.9.1"
+    "@tsparticles/engine": "4.0.0-alpha.1"
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "type": "module"
 }