@tsparticles/all 3.2.2 → 3.3.0

package/plugins_polygonMask_dist_browser_PolygonMaskInstance_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*
@@ -23,7 +23,17 @@
   \*********************************************************************/
 /***/ ((__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 _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n\nconst noPolygonDataLoaded = `${_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} No polygon data loaded.`,\n  noPolygonFound = `${_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} 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 === \"none\" || options.type === \"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_0__.getRandom)() * canvasSize.width,\n        y = position?.y ?? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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          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 === \"inside\") {\n        return inside;\n      } else {\n        return options.type === \"outside\" ? !inside : false;\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 = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\").createSVGMatrix(),\n            finalPath = new Path2D(),\n            transform = matrix.scale(this._scale);\n          if (finalPath.addPath) {\n            finalPath.addPath(path2d, transform);\n            path.path2d = finalPath;\n          } else {\n            delete path.path2d;\n          }\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        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(`${_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} occurred during polygon mask download`);\n      }\n      return await 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      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_0__.itemFromArray)(this.raw);\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_0__.itemFromArray)(this.paths),\n        offset = 1,\n        distance = Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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_0__.isString)(data)) {\n          svg = data;\n        } else {\n          const getPath = p => `<path d=\"${p}\" />`,\n            path = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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}\" height=\"${data.size.height}\">${path}</svg>`;\n        }\n        this.raw = await this._parseSvgPath(svg, force);\n      }\n      this._createPath2D();\n      this._engine.dispatchEvent(\"polygonMaskLoaded\", {\n        container: this._container\n      });\n    };\n    this._parseSvgPath = async (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      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_0__.percentDenominator - this.dimension.width * half,\n        y: canvasSize.height * position.y / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator - this.dimension.height * half\n      };\n      const {\n        parsePaths\n      } = await __webpack_require__.e(/*! import() */ \"plugins_polygonMask_dist_browser_utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./utils.js */ \"../../plugins/polygonMask/dist/browser/utils.js\"));\n      return parsePaths(this.paths, scale, this.offset);\n    };\n    this._polygonBounce = async (particle, delta, direction) => {\n      const options = this._container.actualOptions.polygon;\n      if (!this.raw || !options?.enable || direction !== \"top\") {\n        return false;\n      }\n      if (options.type === \"inside\" || options.type === \"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            {\n              calcClosestPointOnSegment\n            } = await __webpack_require__.e(/*! import() */ \"plugins_polygonMask_dist_browser_utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./utils.js */ \"../../plugins/polygonMask/dist/browser/utils.js\"));\n          closest = calcClosestPointOnSegment(pi, pj, pos);\n          const dist = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos, closest);\n          [dx, dy] = [dist.dx, dist.dy];\n          if (dist.distance < radius) {\n            const {\n              segmentBounce\n            } = await __webpack_require__.e(/*! import() */ \"plugins_polygonMask_dist_browser_utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./utils.js */ \"../../plugins/polygonMask/dist/browser/utils.js\"));\n            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 === \"inline\" && particle.initialPosition) {\n        const dist = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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 === \"inline\") {\n        switch (options.inline.arrangement) {\n          case \"random-point\":\n            position = this._getRandomPoint();\n            break;\n          case \"random-length\":\n            position = this._getRandomPointByLength();\n            break;\n          case \"equidistant\":\n            position = this._getEquidistantPointByIndex(container.particles.count);\n            break;\n          case \"one-per-point\":\n          case \"per-point\":\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_0__.getRandom)() * canvasSize.width,\n          y: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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 !== \"none\" && options.type !== \"inline\" && this._checkInsidePolygon(position);\n  }\n  async 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 (!context) {\n        continue;\n      }\n      if (path2d && this.offset) {\n        const {\n          drawPolygonMaskPath\n        } = await __webpack_require__.e(/*! import() */ \"plugins_polygonMask_dist_browser_utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./utils.js */ \"../../plugins/polygonMask/dist/browser/utils.js\"));\n        drawPolygonMaskPath(context, path2d, polygonDraw.stroke, this.offset);\n      } else if (rawData) {\n        const {\n          drawPolygonMask\n        } = await __webpack_require__.e(/*! import() */ \"plugins_polygonMask_dist_browser_utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./utils.js */ \"../../plugins/polygonMask/dist/browser/utils.js\"));\n        drawPolygonMask(context, rawData, polygonDraw.stroke);\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  async particleBounce(particle, delta, direction) {\n    return await 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_0__.deepExtend)({}, position ? position : this._randomPoint());\n  }\n  particlesInitialization() {\n    const options = this._container.actualOptions.polygon;\n    if (options?.enable && options.type === \"inline\" && (options.inline.arrangement === \"one-per-point\" || options.inline.arrangement === \"per-point\")) {\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 !== \"none\")) {\n      return;\n    }\n    if (this.redrawTimeout) {\n      clearTimeout(this.redrawTimeout);\n    }\n    const timeout = 250;\n    this.redrawTimeout = window.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/all/../../plugins/polygonMask/dist/browser/PolygonMaskInstance.js?");
+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 _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils.js */ \"../../plugins/polygonMask/dist/browser/utils.js\");\n\n\nconst noPolygonDataLoaded = `${_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} No polygon data loaded.`,\n  noPolygonFound = `${_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} 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 === \"none\" || options.type === \"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_0__.getRandom)() * canvasSize.width,\n        y = position?.y ?? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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          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 === \"inside\") {\n        return inside;\n      } else {\n        return options.type === \"outside\" ? !inside : false;\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 = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\").createSVGMatrix(),\n            finalPath = new Path2D(),\n            transform = matrix.scale(this._scale);\n          if (finalPath.addPath) {\n            finalPath.addPath(path2d, transform);\n            path.path2d = finalPath;\n          } else {\n            delete path.path2d;\n          }\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        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(`${_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} occurred during polygon mask download`);\n      }\n      return await 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      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_0__.itemFromArray)(this.raw);\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_0__.itemFromArray)(this.paths),\n        offset = 1,\n        distance = Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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_0__.isString)(data)) {\n          svg = data;\n        } else {\n          const getPath = p => `<path d=\"${p}\" />`,\n            path = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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}\" height=\"${data.size.height}\">${path}</svg>`;\n        }\n        this.raw = await this._parseSvgPath(svg, force);\n      }\n      this._createPath2D();\n      this._engine.dispatchEvent(\"polygonMaskLoaded\", {\n        container: this._container\n      });\n    };\n    this._parseSvgPath = async (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      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_0__.percentDenominator - this.dimension.width * half,\n        y: canvasSize.height * position.y / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator - this.dimension.height * half\n      };\n      const {\n        parsePaths\n      } = await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./utils.js */ \"../../plugins/polygonMask/dist/browser/utils.js\"));\n      return 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 !== \"top\") {\n        return false;\n      }\n      if (options.type === \"inside\" || options.type === \"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          closest = (0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.calcClosestPointOnSegment)(pi, pj, pos);\n          const dist = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos, closest);\n          [dx, dy] = [dist.dx, dist.dy];\n          if (dist.distance < radius) {\n            (0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.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 === \"inline\" && particle.initialPosition) {\n        const dist = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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 === \"inline\") {\n        switch (options.inline.arrangement) {\n          case \"random-point\":\n            position = this._getRandomPoint();\n            break;\n          case \"random-length\":\n            position = this._getRandomPointByLength();\n            break;\n          case \"equidistant\":\n            position = this._getEquidistantPointByIndex(container.particles.count);\n            break;\n          case \"one-per-point\":\n          case \"per-point\":\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_0__.getRandom)() * canvasSize.width,\n          y: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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 !== \"none\" && options.type !== \"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 (!context) {\n        continue;\n      }\n      if (path2d && this.offset) {\n        (0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.drawPolygonMaskPath)(context, path2d, polygonDraw.stroke, this.offset);\n      } else if (rawData) {\n        (0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.drawPolygonMask)(context, rawData, polygonDraw.stroke);\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_0__.deepExtend)({}, position ? position : this._randomPoint());\n  }\n  particlesInitialization() {\n    const options = this._container.actualOptions.polygon;\n    if (options?.enable && options.type === \"inline\" && (options.inline.arrangement === \"one-per-point\" || options.inline.arrangement === \"per-point\")) {\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 !== \"none\")) {\n      return;\n    }\n    if (this.redrawTimeout) {\n      clearTimeout(this.redrawTimeout);\n    }\n    const timeout = 250;\n    this.redrawTimeout = window.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/all/../../plugins/polygonMask/dist/browser/PolygonMaskInstance.js?");
+
+/***/ }),
+
+/***/ "../../plugins/polygonMask/dist/browser/utils.js":
+/*!*******************************************************!*\
+  !*** ../../plugins/polygonMask/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 */ \"../../engine/dist/browser/index.js\");\n\nconst squareExp = 2,\n  inSegmentRange = {\n    min: 0,\n    max: 1\n  },\n  double = 2;\nfunction drawPolygonMask(context, rawData, stroke) {\n  const color = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(stroke.color);\n  if (!color) {\n    return;\n  }\n  const firstIndex = 0,\n    firstItem = rawData[firstIndex];\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);\n  context.lineWidth = stroke.width;\n  context.stroke();\n}\nfunction drawPolygonMaskPath(context, path, stroke, position) {\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)(stroke.color);\n  if (!color) {\n    return;\n  }\n  context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(color, 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 = window.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/all/../../plugins/polygonMask/dist/browser/utils.js?");
 
 /***/ })
 

package/plugins_polygonMask_dist_browser_PolygonMaskPlugin_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*

package/plugins_polygonMask_dist_browser_index_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*

package/plugins_sounds_dist_browser_SoundsInstance_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*

package/plugins_sounds_dist_browser_SoundsPlugin_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*

package/plugins_sounds_dist_browser_index_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/all [20 Feb 2024 at 01:42]</title>
+    <title>@tsparticles/all [27 Feb 2024 at 12:25]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>

package/shapes_arrow_dist_browser_ArrowDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*
@@ -23,7 +23,17 @@
   \******************************************************/
 /***/ ((__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 */   ArrowDrawer: () => (/* binding */ ArrowDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n\nconst defaultHeightFactor = 0.5,\n  defaultHeadWidthFactor = 0.2,\n  defaultBodyHeightFactor = 0.5;\nclass ArrowDrawer {\n  async draw(data) {\n    const {\n      drawArrow\n    } = await __webpack_require__.e(/*! import() */ \"shapes_arrow_dist_browser_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"../../shapes/arrow/dist/browser/Utils.js\"));\n    drawArrow(data);\n  }\n  async particleInit(container, particle) {\n    const shapeData = particle.shapeData;\n    particle.heightFactor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.heightFactor ?? defaultHeightFactor);\n    particle.headWidthFactor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.headWidthFactor ?? defaultHeadWidthFactor);\n    particle.bodyHeightFactor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.bodyHeightFactor ?? defaultBodyHeightFactor);\n    await Promise.resolve();\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/arrow/dist/browser/ArrowDrawer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ArrowDrawer: () => (/* binding */ ArrowDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/arrow/dist/browser/Utils.js\");\n\n\nconst defaultHeightFactor = 0.5,\n  defaultHeadWidthFactor = 0.2,\n  defaultBodyHeightFactor = 0.5;\nclass ArrowDrawer {\n  draw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawArrow)(data);\n  }\n  particleInit(container, particle) {\n    const shapeData = particle.shapeData;\n    particle.heightFactor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.heightFactor ?? defaultHeightFactor);\n    particle.headWidthFactor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.headWidthFactor ?? defaultHeadWidthFactor);\n    particle.bodyHeightFactor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.bodyHeightFactor ?? defaultBodyHeightFactor);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/arrow/dist/browser/ArrowDrawer.js?");
+
+/***/ }),
+
+/***/ "../../shapes/arrow/dist/browser/Utils.js":
+/*!************************************************!*\
+  !*** ../../shapes/arrow/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 */   drawArrow: () => (/* binding */ drawArrow)\n/* harmony export */ });\nconst double = 2,\n  defaultHeightFactor = 0.5,\n  defaultHeadWidthFactor = 0.2,\n  defaultBodyHeightFactor = 0.5,\n  half = 0.5,\n  origin = {\n    x: 0,\n    y: 0\n  };\nfunction drawArrow(data) {\n  const {\n      context,\n      particle,\n      radius\n    } = data,\n    width = radius * double,\n    heightFactor = particle.heightFactor ?? defaultHeightFactor,\n    headWidthFactor = particle.headWidthFactor ?? defaultHeadWidthFactor,\n    bodyHeightFactor = particle.bodyHeightFactor ?? defaultBodyHeightFactor,\n    height = width * heightFactor,\n    headWidth = width * headWidthFactor,\n    bodyHeight = height * bodyHeightFactor;\n  context.moveTo(-width * half, origin.y);\n  context.lineTo(-width * half, -bodyHeight * half);\n  context.lineTo(width * half - headWidth, -bodyHeight * half);\n  context.lineTo(width * half - headWidth, -height * half);\n  context.lineTo(width * half + headWidth, origin.y);\n  context.lineTo(width * half - headWidth, height * half);\n  context.lineTo(width * half - headWidth, bodyHeight * half);\n  context.lineTo(-width * half, bodyHeight * half);\n  context.lineTo(-width * half, origin.y);\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/arrow/dist/browser/Utils.js?");
 
 /***/ })
 

package/shapes_arrow_dist_browser_index_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*

package/shapes_cards_dist_browser_ClubDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*
@@ -23,7 +23,17 @@
   \*****************************************************/
 /***/ ((__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 */   ClubDrawer: () => (/* binding */ ClubDrawer)\n/* harmony export */ });\nclass ClubDrawer {\n  async draw(data) {\n    const {\n      drawPath,\n      paths\n    } = await __webpack_require__.e(/*! import() */ \"shapes_cards_dist_browser_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"../../shapes/cards/dist/browser/Utils.js\"));\n    drawPath(data, paths.club);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cards/dist/browser/ClubDrawer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ClubDrawer: () => (/* binding */ ClubDrawer)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/cards/dist/browser/Utils.js\");\n\nclass ClubDrawer {\n  draw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.drawPath)(data, _Utils_js__WEBPACK_IMPORTED_MODULE_0__.paths.club);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cards/dist/browser/ClubDrawer.js?");
+
+/***/ }),
+
+/***/ "../../shapes/cards/dist/browser/Utils.js":
+/*!************************************************!*\
+  !*** ../../shapes/cards/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 */   drawPath: () => (/* binding */ drawPath),\n/* harmony export */   paths: () => (/* binding */ paths)\n/* harmony export */ });\nfunction drawPath(data, path) {\n  if (!path.segments.length || !path.segments[0].values.length) {\n    return;\n  }\n  const {\n    context,\n    radius\n  } = data;\n  context.moveTo(path.segments[0].values[0].x * radius, path.segments[0].values[0].y * radius);\n  for (const segment of path.segments) {\n    context.bezierCurveTo(segment.values[1].x * radius, segment.values[1].y * radius, segment.values[2].x * radius, segment.values[2].y * radius, segment.values[3].x * radius, segment.values[3].y * radius);\n  }\n  for (let i = path.segments.length - 1; i >= 0; i--) {\n    const segment = path.segments[i];\n    context.bezierCurveTo(-segment.values[2].x * radius, segment.values[2].y * radius, -segment.values[1].x * radius, segment.values[1].y * radius, -segment.values[0].x * radius, segment.values[0].y * radius);\n  }\n}\nconst n = 1.0 / 2;\nconst paths = {\n  heart: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: -n / 2\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n / 2\n      }]\n    }]\n  },\n  diamond: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }]\n    }]\n  },\n  club: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: -n / 2\n      }, {\n        x: n / 2,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 8\n      }]\n    }, {\n      values: [{\n        x: n / 8,\n        y: n / 8\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }]\n    }]\n  },\n  spade: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 8\n      }]\n    }, {\n      values: [{\n        x: n / 8,\n        y: n / 8\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }]\n    }]\n  }\n};\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cards/dist/browser/Utils.js?");
 
 /***/ })
 

package/shapes_cards_dist_browser_DiamondDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*
@@ -23,7 +23,17 @@
   \********************************************************/
 /***/ ((__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 */   DiamondDrawer: () => (/* binding */ DiamondDrawer)\n/* harmony export */ });\nclass DiamondDrawer {\n  async draw(data) {\n    const {\n      drawPath,\n      paths\n    } = await __webpack_require__.e(/*! import() */ \"shapes_cards_dist_browser_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"../../shapes/cards/dist/browser/Utils.js\"));\n    drawPath(data, paths.diamond);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cards/dist/browser/DiamondDrawer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   DiamondDrawer: () => (/* binding */ DiamondDrawer)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/cards/dist/browser/Utils.js\");\n\nclass DiamondDrawer {\n  draw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.drawPath)(data, _Utils_js__WEBPACK_IMPORTED_MODULE_0__.paths.diamond);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cards/dist/browser/DiamondDrawer.js?");
+
+/***/ }),
+
+/***/ "../../shapes/cards/dist/browser/Utils.js":
+/*!************************************************!*\
+  !*** ../../shapes/cards/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 */   drawPath: () => (/* binding */ drawPath),\n/* harmony export */   paths: () => (/* binding */ paths)\n/* harmony export */ });\nfunction drawPath(data, path) {\n  if (!path.segments.length || !path.segments[0].values.length) {\n    return;\n  }\n  const {\n    context,\n    radius\n  } = data;\n  context.moveTo(path.segments[0].values[0].x * radius, path.segments[0].values[0].y * radius);\n  for (const segment of path.segments) {\n    context.bezierCurveTo(segment.values[1].x * radius, segment.values[1].y * radius, segment.values[2].x * radius, segment.values[2].y * radius, segment.values[3].x * radius, segment.values[3].y * radius);\n  }\n  for (let i = path.segments.length - 1; i >= 0; i--) {\n    const segment = path.segments[i];\n    context.bezierCurveTo(-segment.values[2].x * radius, segment.values[2].y * radius, -segment.values[1].x * radius, segment.values[1].y * radius, -segment.values[0].x * radius, segment.values[0].y * radius);\n  }\n}\nconst n = 1.0 / 2;\nconst paths = {\n  heart: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: -n / 2\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n / 2\n      }]\n    }]\n  },\n  diamond: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }]\n    }]\n  },\n  club: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: -n / 2\n      }, {\n        x: n / 2,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 8\n      }]\n    }, {\n      values: [{\n        x: n / 8,\n        y: n / 8\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }]\n    }]\n  },\n  spade: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 8\n      }]\n    }, {\n      values: [{\n        x: n / 8,\n        y: n / 8\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }]\n    }]\n  }\n};\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cards/dist/browser/Utils.js?");
 
 /***/ })
 

package/shapes_cards_dist_browser_HeartDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*
@@ -23,7 +23,17 @@
   \******************************************************/
 /***/ ((__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 */   HeartDrawer: () => (/* binding */ HeartDrawer)\n/* harmony export */ });\nclass HeartDrawer {\n  async draw(data) {\n    const {\n      drawPath,\n      paths\n    } = await __webpack_require__.e(/*! import() */ \"shapes_cards_dist_browser_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"../../shapes/cards/dist/browser/Utils.js\"));\n    drawPath(data, paths.heart);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cards/dist/browser/HeartDrawer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   HeartDrawer: () => (/* binding */ HeartDrawer)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/cards/dist/browser/Utils.js\");\n\nclass HeartDrawer {\n  draw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.drawPath)(data, _Utils_js__WEBPACK_IMPORTED_MODULE_0__.paths.heart);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cards/dist/browser/HeartDrawer.js?");
+
+/***/ }),
+
+/***/ "../../shapes/cards/dist/browser/Utils.js":
+/*!************************************************!*\
+  !*** ../../shapes/cards/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 */   drawPath: () => (/* binding */ drawPath),\n/* harmony export */   paths: () => (/* binding */ paths)\n/* harmony export */ });\nfunction drawPath(data, path) {\n  if (!path.segments.length || !path.segments[0].values.length) {\n    return;\n  }\n  const {\n    context,\n    radius\n  } = data;\n  context.moveTo(path.segments[0].values[0].x * radius, path.segments[0].values[0].y * radius);\n  for (const segment of path.segments) {\n    context.bezierCurveTo(segment.values[1].x * radius, segment.values[1].y * radius, segment.values[2].x * radius, segment.values[2].y * radius, segment.values[3].x * radius, segment.values[3].y * radius);\n  }\n  for (let i = path.segments.length - 1; i >= 0; i--) {\n    const segment = path.segments[i];\n    context.bezierCurveTo(-segment.values[2].x * radius, segment.values[2].y * radius, -segment.values[1].x * radius, segment.values[1].y * radius, -segment.values[0].x * radius, segment.values[0].y * radius);\n  }\n}\nconst n = 1.0 / 2;\nconst paths = {\n  heart: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: -n / 2\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n / 2\n      }]\n    }]\n  },\n  diamond: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }]\n    }]\n  },\n  club: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: -n / 2\n      }, {\n        x: n / 2,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 8\n      }]\n    }, {\n      values: [{\n        x: n / 8,\n        y: n / 8\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }]\n    }]\n  },\n  spade: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 8\n      }]\n    }, {\n      values: [{\n        x: n / 8,\n        y: n / 8\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }]\n    }]\n  }\n};\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cards/dist/browser/Utils.js?");
 
 /***/ })
 

package/shapes_cards_dist_browser_SpadeDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*
@@ -23,7 +23,17 @@
   \******************************************************/
 /***/ ((__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 */   SpadeDrawer: () => (/* binding */ SpadeDrawer)\n/* harmony export */ });\nclass SpadeDrawer {\n  async draw(data) {\n    const {\n      drawPath,\n      paths\n    } = await __webpack_require__.e(/*! import() */ \"shapes_cards_dist_browser_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"../../shapes/cards/dist/browser/Utils.js\"));\n    drawPath(data, paths.spade);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cards/dist/browser/SpadeDrawer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   SpadeDrawer: () => (/* binding */ SpadeDrawer)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/cards/dist/browser/Utils.js\");\n\nclass SpadeDrawer {\n  draw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.drawPath)(data, _Utils_js__WEBPACK_IMPORTED_MODULE_0__.paths.spade);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cards/dist/browser/SpadeDrawer.js?");
+
+/***/ }),
+
+/***/ "../../shapes/cards/dist/browser/Utils.js":
+/*!************************************************!*\
+  !*** ../../shapes/cards/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 */   drawPath: () => (/* binding */ drawPath),\n/* harmony export */   paths: () => (/* binding */ paths)\n/* harmony export */ });\nfunction drawPath(data, path) {\n  if (!path.segments.length || !path.segments[0].values.length) {\n    return;\n  }\n  const {\n    context,\n    radius\n  } = data;\n  context.moveTo(path.segments[0].values[0].x * radius, path.segments[0].values[0].y * radius);\n  for (const segment of path.segments) {\n    context.bezierCurveTo(segment.values[1].x * radius, segment.values[1].y * radius, segment.values[2].x * radius, segment.values[2].y * radius, segment.values[3].x * radius, segment.values[3].y * radius);\n  }\n  for (let i = path.segments.length - 1; i >= 0; i--) {\n    const segment = path.segments[i];\n    context.bezierCurveTo(-segment.values[2].x * radius, segment.values[2].y * radius, -segment.values[1].x * radius, segment.values[1].y * radius, -segment.values[0].x * radius, segment.values[0].y * radius);\n  }\n}\nconst n = 1.0 / 2;\nconst paths = {\n  heart: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: -n / 2\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n / 2\n      }]\n    }]\n  },\n  diamond: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }]\n    }]\n  },\n  club: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: -n / 2\n      }, {\n        x: n / 2,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 8\n      }]\n    }, {\n      values: [{\n        x: n / 8,\n        y: n / 8\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }]\n    }]\n  },\n  spade: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 8\n      }]\n    }, {\n      values: [{\n        x: n / 8,\n        y: n / 8\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }]\n    }]\n  }\n};\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cards/dist/browser/Utils.js?");
 
 /***/ })
 

package/shapes_cards_dist_browser_index_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*

package/shapes_circle_dist_browser_CircleDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*
@@ -23,7 +23,17 @@
   \********************************************************/
 /***/ ((__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 */   CircleDrawer: () => (/* binding */ CircleDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n\nconst sides = 12,\n  maxAngle = 360,\n  minAngle = 0;\nclass CircleDrawer {\n  async draw(data) {\n    const {\n      drawCircle\n    } = await __webpack_require__.e(/*! import() */ \"shapes_circle_dist_browser_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"../../shapes/circle/dist/browser/Utils.js\"));\n    drawCircle(data);\n  }\n  getSidesCount() {\n    return sides;\n  }\n  async particleInit(container, particle) {\n    const shapeData = particle.shapeData,\n      angle = shapeData?.angle ?? {\n        max: maxAngle,\n        min: minAngle\n      };\n    particle.circleRange = !(0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isObject)(angle) ? {\n      min: minAngle,\n      max: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.degToRad)(angle)\n    } : {\n      min: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.degToRad)(angle.min),\n      max: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.degToRad)(angle.max)\n    };\n    await Promise.resolve();\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/circle/dist/browser/CircleDrawer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CircleDrawer: () => (/* binding */ CircleDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/circle/dist/browser/Utils.js\");\n\n\nconst sides = 12,\n  maxAngle = 360,\n  minAngle = 0;\nclass CircleDrawer {\n  draw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawCircle)(data);\n  }\n  getSidesCount() {\n    return sides;\n  }\n  particleInit(container, particle) {\n    const shapeData = particle.shapeData,\n      angle = shapeData?.angle ?? {\n        max: maxAngle,\n        min: minAngle\n      };\n    particle.circleRange = !(0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isObject)(angle) ? {\n      min: minAngle,\n      max: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.degToRad)(angle)\n    } : {\n      min: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.degToRad)(angle.min),\n      max: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.degToRad)(angle.max)\n    };\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/circle/dist/browser/CircleDrawer.js?");
+
+/***/ }),
+
+/***/ "../../shapes/circle/dist/browser/Utils.js":
+/*!*************************************************!*\
+  !*** ../../shapes/circle/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 */   drawCircle: () => (/* binding */ drawCircle)\n/* harmony export */ });\nconst double = 2,\n  doublePI = Math.PI * double,\n  minAngle = 0,\n  origin = {\n    x: 0,\n    y: 0\n  };\nfunction drawCircle(data) {\n  const {\n    context,\n    particle,\n    radius\n  } = data;\n  if (!particle.circleRange) {\n    particle.circleRange = {\n      min: minAngle,\n      max: doublePI\n    };\n  }\n  const circleRange = particle.circleRange;\n  context.arc(origin.x, origin.y, radius, circleRange.min, circleRange.max, false);\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/circle/dist/browser/Utils.js?");
 
 /***/ })
 

package/shapes_circle_dist_browser_index_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*

package/shapes_cog_dist_browser_CogDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*
@@ -23,7 +23,17 @@
   \**************************************************/
 /***/ ((__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 */   CogDrawer: () => (/* binding */ CogDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n\nconst defaultHoleRadius = 44,\n  defaultInnerRadius = 72,\n  defaultInnerTaper = 35,\n  defaultNotches = 7,\n  defaultOuterTaper = 50;\nclass CogDrawer {\n  async afterDraw(data) {\n    const {\n      drawCogHole\n    } = await __webpack_require__.e(/*! import() */ \"shapes_cog_dist_browser_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"../../shapes/cog/dist/browser/Utils.js\"));\n    drawCogHole(data);\n  }\n  async draw(data) {\n    const {\n      drawCog\n    } = await __webpack_require__.e(/*! import() */ \"shapes_cog_dist_browser_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"../../shapes/cog/dist/browser/Utils.js\"));\n    drawCog(data);\n  }\n  async particleInit(container, particle) {\n    const shapeData = particle.shapeData;\n    particle.cogHoleRadius = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.holeRadius ?? defaultHoleRadius);\n    particle.cogInnerRadius = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.innerRadius ?? defaultInnerRadius);\n    particle.cogInnerTaper = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.innerTaper ?? defaultInnerTaper);\n    particle.cogNotches = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.notches ?? defaultNotches);\n    particle.cogOuterTaper = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.outerTaper ?? defaultOuterTaper);\n    await Promise.resolve();\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cog/dist/browser/CogDrawer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CogDrawer: () => (/* binding */ CogDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/cog/dist/browser/Utils.js\");\n\n\nconst defaultHoleRadius = 44,\n  defaultInnerRadius = 72,\n  defaultInnerTaper = 35,\n  defaultNotches = 7,\n  defaultOuterTaper = 50;\nclass CogDrawer {\n  afterDraw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawCogHole)(data);\n  }\n  draw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawCog)(data);\n  }\n  particleInit(container, particle) {\n    const shapeData = particle.shapeData;\n    particle.cogHoleRadius = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.holeRadius ?? defaultHoleRadius);\n    particle.cogInnerRadius = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.innerRadius ?? defaultInnerRadius);\n    particle.cogInnerTaper = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.innerTaper ?? defaultInnerTaper);\n    particle.cogNotches = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.notches ?? defaultNotches);\n    particle.cogOuterTaper = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(shapeData?.outerTaper ?? defaultOuterTaper);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cog/dist/browser/CogDrawer.js?");
+
+/***/ }),
+
+/***/ "../../shapes/cog/dist/browser/Utils.js":
+/*!**********************************************!*\
+  !*** ../../shapes/cog/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 */   drawCog: () => (/* binding */ drawCog),\n/* harmony export */   drawCogHole: () => (/* binding */ drawCogHole)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n\nconst double = 2,\n  doublePI = Math.PI * double,\n  minAngle = 0,\n  origin = {\n    x: 0,\n    y: 0\n  },\n  taperFactor = 0.005;\nfunction drawCogHole(data) {\n  const {\n    context,\n    particle,\n    radius\n  } = data;\n  if (particle.cogHoleRadius === undefined || particle.cogInnerRadius === undefined || particle.cogInnerTaper === undefined || particle.cogNotches === undefined || particle.cogOuterTaper === undefined) {\n    return;\n  }\n  const holeRadius = radius * particle.cogHoleRadius / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator;\n  context.globalCompositeOperation = \"destination-out\";\n  context.beginPath();\n  context.moveTo(holeRadius, origin.y);\n  context.arc(origin.x, origin.y, holeRadius, minAngle, doublePI);\n  context.closePath();\n  context.fill();\n  context.globalCompositeOperation = \"source-over\";\n}\nfunction drawCog(data) {\n  const {\n    context,\n    particle,\n    radius\n  } = data;\n  if (particle.cogHoleRadius === undefined || particle.cogInnerRadius === undefined || particle.cogInnerTaper === undefined || particle.cogNotches === undefined || particle.cogOuterTaper === undefined) {\n    return;\n  }\n  const angle = doublePI / (particle.cogNotches * double),\n    taperAI = angle * particle.cogInnerTaper * taperFactor,\n    taperAO = angle * particle.cogOuterTaper * taperFactor,\n    innerRadius = radius * particle.cogInnerRadius / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator;\n  let a = angle,\n    toggle = false;\n  context.moveTo(radius * Math.cos(taperAO), radius * Math.sin(taperAO));\n  for (; a <= doublePI; a += angle) {\n    if (toggle) {\n      context.lineTo(innerRadius * Math.cos(a - taperAI), innerRadius * Math.sin(a - taperAI));\n      context.lineTo(radius * Math.cos(a + taperAO), radius * Math.sin(a + taperAO));\n    } else {\n      context.lineTo(radius * Math.cos(a - taperAO), radius * Math.sin(a - taperAO));\n      context.lineTo(innerRadius * Math.cos(a + taperAI), innerRadius * Math.sin(a + taperAI));\n    }\n    toggle = !toggle;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/cog/dist/browser/Utils.js?");
 
 /***/ })
 

package/shapes_cog_dist_browser_index_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*

package/shapes_emoji_dist_browser_EmojiDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*
@@ -23,7 +23,17 @@
   \******************************************************/
 /***/ ((__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 */   EmojiDrawer: () => (/* binding */ EmojiDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Constants.js */ \"../../shapes/emoji/dist/browser/Constants.js\");\n\n\nconst defaultFont = '\"Twemoji Mozilla\", Apple Color Emoji, \"Segoe UI Emoji\", \"Noto Color Emoji\", \"EmojiOne Color\"';\nclass EmojiDrawer {\n  constructor() {\n    this._emojiShapeDict = new Map();\n  }\n  destroy() {\n    for (const [key, emojiData] of this._emojiShapeDict) {\n      if (emojiData instanceof ImageBitmap) {\n        emojiData?.close();\n        this._emojiShapeDict.delete(key);\n      }\n    }\n  }\n  async draw(data) {\n    const {\n      drawEmoji\n    } = await __webpack_require__.e(/*! import() */ \"shapes_emoji_dist_browser_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"../../shapes/emoji/dist/browser/Utils.js\"));\n    drawEmoji(data);\n  }\n  async init(container) {\n    const options = container.actualOptions;\n    if (!_Constants_js__WEBPACK_IMPORTED_MODULE_1__.validTypes.find(t => (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(t, options.particles.shape.type))) {\n      return;\n    }\n    const promises = [(0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.loadFont)(defaultFont)],\n      shapeOptions = _Constants_js__WEBPACK_IMPORTED_MODULE_1__.validTypes.map(t => options.particles.shape.options[t]).find(t => !!t);\n    if (shapeOptions) {\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(shapeOptions, shape => {\n        if (shape.font) {\n          promises.push((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.loadFont)(shape.font));\n        }\n      });\n    }\n    await Promise.all(promises);\n  }\n  particleDestroy(particle) {\n    delete particle.emojiData;\n  }\n  async particleInit(container, particle) {\n    const double = 2,\n      shapeData = particle.shapeData;\n    if (!shapeData?.value) {\n      return;\n    }\n    const emoji = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(shapeData.value, particle.randomIndexData),\n      font = shapeData.font ?? defaultFont;\n    if (!emoji) {\n      return;\n    }\n    const key = `${emoji}_${font}`,\n      existingData = this._emojiShapeDict.get(key);\n    if (existingData) {\n      particle.emojiData = existingData;\n      return;\n    }\n    const canvasSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.size.value) * double;\n    let emojiData;\n    const maxSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.size.value);\n    if (typeof OffscreenCanvas !== \"undefined\") {\n      const canvas = new OffscreenCanvas(canvasSize, canvasSize),\n        context = canvas.getContext(\"2d\");\n      if (!context) {\n        return;\n      }\n      context.font = `400 ${maxSize * double}px ${font}`;\n      context.textBaseline = \"middle\";\n      context.textAlign = \"center\";\n      context.fillText(emoji, maxSize, maxSize);\n      emojiData = canvas.transferToImageBitmap();\n    } else {\n      const canvas = document.createElement(\"canvas\");\n      canvas.width = canvasSize;\n      canvas.height = canvasSize;\n      const context = canvas.getContext(\"2d\");\n      if (!context) {\n        return;\n      }\n      context.font = `400 ${maxSize * double}px ${font}`;\n      context.textBaseline = \"middle\";\n      context.textAlign = \"center\";\n      context.fillText(emoji, maxSize, maxSize);\n      emojiData = canvas;\n    }\n    this._emojiShapeDict.set(key, emojiData);\n    particle.emojiData = emojiData;\n    await Promise.resolve();\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/emoji/dist/browser/EmojiDrawer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmojiDrawer: () => (/* binding */ EmojiDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../engine/dist/browser/index.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/emoji/dist/browser/Utils.js\");\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Constants.js */ \"../../shapes/emoji/dist/browser/Constants.js\");\n\n\n\nconst defaultFont = '\"Twemoji Mozilla\", Apple Color Emoji, \"Segoe UI Emoji\", \"Noto Color Emoji\", \"EmojiOne Color\"';\nclass EmojiDrawer {\n  constructor() {\n    this._emojiShapeDict = new Map();\n  }\n  destroy() {\n    for (const [key, emojiData] of this._emojiShapeDict) {\n      if (emojiData instanceof ImageBitmap) {\n        emojiData?.close();\n        this._emojiShapeDict.delete(key);\n      }\n    }\n  }\n  draw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawEmoji)(data);\n  }\n  async init(container) {\n    const options = container.actualOptions;\n    if (!_Constants_js__WEBPACK_IMPORTED_MODULE_2__.validTypes.find(t => (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(t, options.particles.shape.type))) {\n      return;\n    }\n    const promises = [(0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.loadFont)(defaultFont)],\n      shapeOptions = _Constants_js__WEBPACK_IMPORTED_MODULE_2__.validTypes.map(t => options.particles.shape.options[t]).find(t => !!t);\n    if (shapeOptions) {\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(shapeOptions, shape => {\n        if (shape.font) {\n          promises.push((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.loadFont)(shape.font));\n        }\n      });\n    }\n    await Promise.all(promises);\n  }\n  particleDestroy(particle) {\n    delete particle.emojiData;\n  }\n  particleInit(container, particle) {\n    const double = 2,\n      shapeData = particle.shapeData;\n    if (!shapeData?.value) {\n      return;\n    }\n    const emoji = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(shapeData.value, particle.randomIndexData),\n      font = shapeData.font ?? defaultFont;\n    if (!emoji) {\n      return;\n    }\n    const key = `${emoji}_${font}`,\n      existingData = this._emojiShapeDict.get(key);\n    if (existingData) {\n      particle.emojiData = existingData;\n      return;\n    }\n    const canvasSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.size.value) * double;\n    let emojiData;\n    const maxSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.size.value);\n    if (typeof OffscreenCanvas !== \"undefined\") {\n      const canvas = new OffscreenCanvas(canvasSize, canvasSize),\n        context = canvas.getContext(\"2d\");\n      if (!context) {\n        return;\n      }\n      context.font = `400 ${maxSize * double}px ${font}`;\n      context.textBaseline = \"middle\";\n      context.textAlign = \"center\";\n      context.fillText(emoji, maxSize, maxSize);\n      emojiData = canvas.transferToImageBitmap();\n    } else {\n      const canvas = document.createElement(\"canvas\");\n      canvas.width = canvasSize;\n      canvas.height = canvasSize;\n      const context = canvas.getContext(\"2d\");\n      if (!context) {\n        return;\n      }\n      context.font = `400 ${maxSize * double}px ${font}`;\n      context.textBaseline = \"middle\";\n      context.textAlign = \"center\";\n      context.fillText(emoji, maxSize, maxSize);\n      emojiData = canvas;\n    }\n    this._emojiShapeDict.set(key, emojiData);\n    particle.emojiData = emojiData;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/emoji/dist/browser/EmojiDrawer.js?");
+
+/***/ }),
+
+/***/ "../../shapes/emoji/dist/browser/Utils.js":
+/*!************************************************!*\
+  !*** ../../shapes/emoji/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 */   drawEmoji: () => (/* binding */ drawEmoji)\n/* harmony export */ });\nfunction drawEmoji(data) {\n  const {\n      context,\n      particle,\n      radius,\n      opacity\n    } = data,\n    emojiData = particle.emojiData,\n    double = 2,\n    diameter = radius * double,\n    previousAlpha = context.globalAlpha;\n  if (!emojiData) {\n    return;\n  }\n  context.globalAlpha = opacity;\n  context.drawImage(emojiData, -radius, -radius, diameter, diameter);\n  context.globalAlpha = previousAlpha;\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/emoji/dist/browser/Utils.js?");
 
 /***/ })
 

package/shapes_emoji_dist_browser_index_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*

package/shapes_heart_dist_browser_HeartDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.2
+ * v3.3.0
  */
 "use strict";
 /*
@@ -23,7 +23,17 @@
   \******************************************************/
 /***/ ((__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 */   HeartDrawer: () => (/* binding */ HeartDrawer)\n/* harmony export */ });\nclass HeartDrawer {\n  async draw(data) {\n    const {\n      drawHeart\n    } = await __webpack_require__.e(/*! import() */ \"shapes_heart_dist_browser_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"../../shapes/heart/dist/browser/Utils.js\"));\n    drawHeart(data);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/heart/dist/browser/HeartDrawer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   HeartDrawer: () => (/* binding */ HeartDrawer)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"../../shapes/heart/dist/browser/Utils.js\");\n\nclass HeartDrawer {\n  draw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.drawHeart)(data);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/heart/dist/browser/HeartDrawer.js?");
+
+/***/ }),
+
+/***/ "../../shapes/heart/dist/browser/Utils.js":
+/*!************************************************!*\
+  !*** ../../shapes/heart/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 */   drawHeart: () => (/* binding */ drawHeart)\n/* harmony export */ });\nconst half = 0.5,\n  double = 2;\nfunction drawHeart(data) {\n  const {\n      context,\n      radius\n    } = data,\n    diameter = radius * double,\n    halfRadius = radius * half,\n    radiusAndHalf = radius + halfRadius,\n    x = -radius,\n    y = -radius;\n  context.moveTo(x, y + halfRadius);\n  context.quadraticCurveTo(x, y, x + halfRadius, y);\n  context.quadraticCurveTo(x + radius, y, x + radius, y + halfRadius);\n  context.quadraticCurveTo(x + radius, y, x + radiusAndHalf, y);\n  context.quadraticCurveTo(x + diameter, y, x + diameter, y + halfRadius);\n  context.quadraticCurveTo(x + diameter, y + radius, x + radiusAndHalf, y + radiusAndHalf);\n  context.lineTo(x + radius, y + diameter);\n  context.lineTo(x + halfRadius, y + radiusAndHalf);\n  context.quadraticCurveTo(x, y + radius, x, y + halfRadius);\n}\n\n//# sourceURL=webpack://@tsparticles/all/../../shapes/heart/dist/browser/Utils.js?");
 
 /***/ })