@tsparticles/path-svg 3.0.3 → 3.2.0

package/794.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 794.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_path_svg=this.webpackChunk_tsparticles_path_svg||[]).push([[794],{794:(t,e,s)=>{s.d(e,{SVGPathGenerator:()=>a});var i=s(533);const h=.5;class a{constructor(){this._paths=[],this._reverse=!1,this._size={width:0,height:0},this._scale=1,this._offset={x:0,y:0,mode:"percent"},this._width=0}generate(t,e){const s=t.container.retina.pixelRatio;void 0===t.svgDirection&&(t.svgDirection=(0,i.getRandom)()>i.halfRandom?0:1),void 0===t.svgPathIndex&&(t.svgPathIndex=Math.floor(Math.random()*this._paths.length)),void 0===t.svgSpeed&&(t.svgSpeed=t.velocity.mult((t.retina.moveSpeed??1)*h).length),void 0===t.svgStep&&(t.svgStep=(0,i.randomInRange)({min:0,max:this._paths[t.svgPathIndex].length})*s),void 0===t.svgOffset&&(t.svgOffset={width:(0,i.randomInRange)({min:-this._width*h,max:this._width*h})*s,height:(0,i.randomInRange)({min:-this._width*h,max:this._width*h})*s}),void 0===t.svgInitialPosition&&(t.svgInitialPosition={...t.position}),t.velocity.x=0,t.velocity.y=0,0===t.svgDirection?t.svgStep+=t.svgSpeed*e.factor:t.svgStep-=t.svgSpeed*e.factor;let a=this._paths[t.svgPathIndex];if(a){const e=a.length,s=1;t.svgStep>=e?(t.svgPathIndex=t.svgPathIndex+s,t.svgPathIndex>=this._paths.length&&(this._reverse?(t.svgPathIndex=this._paths.length-s,t.svgDirection=1):(t.svgPathIndex=0,t.svgStep=0))):t.svgStep<=0&&(t.svgPathIndex=t.svgPathIndex-s,t.svgPathIndex<0&&(this._reverse?(t.svgPathIndex=0,t.svgDirection=0):(t.svgPathIndex=this._paths.length-s,a=this._paths[t.svgPathIndex],t.svgStep=a.length))),a=this._paths[t.svgPathIndex]}if(a){const e=a.element.getPointAtLength(t.svgStep),n=t.container.canvas.size,g=(0,i.getPosition)(this._offset,n),o=this._scale*s;t.position.x=(e.x-this._size.width*h)*o+t.svgInitialPosition.x+g.x+t.svgOffset.width,t.position.y=(e.y-this._size.height*h)*o+t.svgInitialPosition.y+g.y+t.svgOffset.height}return Promise.resolve(i.Vector.origin)}async init(t){const e=t.actualOptions.particles.move.path.options,s=e.position??this._offset;if(this._reverse=e.reverse??this._reverse,this._scale=e.scale??1,this._offset.x=s.x,this._offset.y=s.y,this._offset.mode=s.mode,this._width=e.width??0,e.url&&!e.path){const t=e.url,s=await fetch(t),i=await s.text(),h=(new DOMParser).parseFromString(i,"image/svg+xml"),a=0,n=h.getElementsByTagName("svg")[a];let g=n.getElementsByTagName("path");g.length||(g=h.getElementsByTagName("path")),this._paths=[];for(let t=0;t<g.length;t++){const e=g.item(t);e&&this._paths.push({element:e,length:e.getTotalLength()})}this._size.height=parseFloat(n.getAttribute("height")??"0"),this._size.width=parseFloat(n.getAttribute("width")??"0")}else if(e.path){const t=e.path;this._paths=[];for(const e of t.data){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d",e),this._paths.push({element:t,length:t.getTotalLength()})}this._size.height=t.size.height,this._size.width=t.size.width}}reset(){}update(){}}}}]);

package/794.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles SVG Path v3.2.0 by Matteo Bruni */

package/browser/SVGPathGenerator.js

@@ -1,4 +1,5 @@
-import { Vector, getPosition, getRandom, randomInRange, } from "@tsparticles/engine";
+import { Vector, getPosition, getRandom, halfRandom, randomInRange, } from "@tsparticles/engine";
+const defaultSpeed = 1, half = 0.5, minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
 export class SVGPathGenerator {
     constructor() {
         this._paths = [];
@@ -11,21 +12,21 @@ export class SVGPathGenerator {
     generate(particle, delta) {
         const container = particle.container, pxRatio = container.retina.pixelRatio;
         if (particle.svgDirection === undefined) {
-            particle.svgDirection = getRandom() > 0.5 ? 0 : 1;
+            particle.svgDirection = getRandom() > halfRandom ? 0 : 1;
         }
         if (particle.svgPathIndex === undefined) {
             particle.svgPathIndex = Math.floor(Math.random() * this._paths.length);
         }
         if (particle.svgSpeed === undefined) {
-            particle.svgSpeed = particle.velocity.mult((particle.retina.moveSpeed ?? 1) / 2).length;
+            particle.svgSpeed = particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * half).length;
         }
         if (particle.svgStep === undefined) {
             particle.svgStep = randomInRange({ min: 0, max: this._paths[particle.svgPathIndex].length }) * pxRatio;
         }
         if (particle.svgOffset === undefined) {
             particle.svgOffset = {
-                width: randomInRange({ min: -this._width / 2, max: this._width / 2 }) * pxRatio,
-                height: randomInRange({ min: -this._width / 2, max: this._width / 2 }) * pxRatio,
+                width: randomInRange({ min: -this._width * half, max: this._width * half }) * pxRatio,
+                height: randomInRange({ min: -this._width * half, max: this._width * half }) * pxRatio,
             };
         }
         if (particle.svgInitialPosition === undefined) {
@@ -41,12 +42,12 @@ export class SVGPathGenerator {
         }
         let path = this._paths[particle.svgPathIndex];
         if (path) {
-            const pathLength = path.length;
+            const pathLength = path.length, indexOffset = 1;
             if (particle.svgStep >= pathLength) {
-                particle.svgPathIndex = particle.svgPathIndex + 1;
+                particle.svgPathIndex = particle.svgPathIndex + indexOffset;
                 if (particle.svgPathIndex >= this._paths.length) {
                     if (this._reverse) {
-                        particle.svgPathIndex = this._paths.length - 1;
+                        particle.svgPathIndex = this._paths.length - indexOffset;
                         particle.svgDirection = 1;
                     }
                     else {
@@ -55,15 +56,15 @@ export class SVGPathGenerator {
                     }
                 }
             }
-            else if (particle.svgStep <= 0) {
-                particle.svgPathIndex = particle.svgPathIndex - 1;
-                if (particle.svgPathIndex < 0) {
+            else if (particle.svgStep <= minStep) {
+                particle.svgPathIndex = particle.svgPathIndex - indexOffset;
+                if (particle.svgPathIndex < minIndex) {
                     if (this._reverse) {
                         particle.svgPathIndex = 0;
                         particle.svgDirection = 0;
                     }
                     else {
-                        particle.svgPathIndex = this._paths.length - 1;
+                        particle.svgPathIndex = this._paths.length - indexOffset;
                         path = this._paths[particle.svgPathIndex];
                         particle.svgStep = path.length;
                     }
@@ -74,48 +75,46 @@ export class SVGPathGenerator {
         if (path) {
             const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = particle.container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
             particle.position.x =
-                (pos.x - this._size.width / 2) * scale +
+                (pos.x - this._size.width * half) * scale +
                     particle.svgInitialPosition.x +
                     offset.x +
                     particle.svgOffset.width;
             particle.position.y =
-                (pos.y - this._size.height / 2) * scale +
+                (pos.y - this._size.height * half) * scale +
                     particle.svgInitialPosition.y +
                     offset.y +
                     particle.svgOffset.height;
         }
-        return Vector.origin;
+        return Promise.resolve(Vector.origin);
     }
-    init(container) {
+    async init(container) {
         const options = container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
         this._reverse = options.reverse ?? this._reverse;
-        this._scale = options.scale ?? 1;
+        this._scale = options.scale ?? minScale;
         this._offset.x = position.x;
         this._offset.y = position.y;
         this._offset.mode = position.mode;
-        this._width = options.width ?? 0;
+        this._width = options.width ?? minWidth;
         if (options.url && !options.path) {
             const url = options.url;
-            (async () => {
-                const response = await fetch(url), data = await response.text();
-                const parser = new DOMParser(), doc = parser.parseFromString(data, "image/svg+xml"), svg = doc.getElementsByTagName("svg")[0];
-                let svgPaths = svg.getElementsByTagName("path");
-                if (!svgPaths.length) {
-                    svgPaths = doc.getElementsByTagName("path");
-                }
-                this._paths = [];
-                for (let i = 0; i < svgPaths.length; i++) {
-                    const path = svgPaths.item(i);
-                    if (path) {
-                        this._paths.push({
-                            element: path,
-                            length: path.getTotalLength(),
-                        });
-                    }
+            const response = await fetch(url), data = await response.text();
+            const parser = new DOMParser(), doc = parser.parseFromString(data, "image/svg+xml"), firstIndex = 0, svg = doc.getElementsByTagName("svg")[firstIndex];
+            let svgPaths = svg.getElementsByTagName("path");
+            if (!svgPaths.length) {
+                svgPaths = doc.getElementsByTagName("path");
+            }
+            this._paths = [];
+            for (let i = 0; i < svgPaths.length; i++) {
+                const path = svgPaths.item(i);
+                if (path) {
+                    this._paths.push({
+                        element: path,
+                        length: path.getTotalLength(),
+                    });
                 }
-                this._size.height = parseFloat(svg.getAttribute("height") ?? "0");
-                this._size.width = parseFloat(svg.getAttribute("width") ?? "0");
-            })();
+            }
+            this._size.height = parseFloat(svg.getAttribute("height") ?? "0");
+            this._size.width = parseFloat(svg.getAttribute("width") ?? "0");
         }
         else if (options.path) {
             const path = options.path;

package/browser/index.js

@@ -1,5 +1,5 @@
-import { SVGPathGenerator } from "./SVGPathGenerator.js";
 export const svgPathName = "svgPathGenerator";
 export async function loadSVGPath(engine, refresh = true) {
+    const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
     await engine.addPathGenerator(svgPathName, new SVGPathGenerator(), refresh);
 }

package/cjs/SVGPathGenerator.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SVGPathGenerator = void 0;
 const engine_1 = require("@tsparticles/engine");
+const defaultSpeed = 1, half = 0.5, minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
 class SVGPathGenerator {
     constructor() {
         this._paths = [];
@@ -14,21 +15,21 @@ class SVGPathGenerator {
     generate(particle, delta) {
         const container = particle.container, pxRatio = container.retina.pixelRatio;
         if (particle.svgDirection === undefined) {
-            particle.svgDirection = (0, engine_1.getRandom)() > 0.5 ? 0 : 1;
+            particle.svgDirection = (0, engine_1.getRandom)() > engine_1.halfRandom ? 0 : 1;
         }
         if (particle.svgPathIndex === undefined) {
             particle.svgPathIndex = Math.floor(Math.random() * this._paths.length);
         }
         if (particle.svgSpeed === undefined) {
-            particle.svgSpeed = particle.velocity.mult((particle.retina.moveSpeed ?? 1) / 2).length;
+            particle.svgSpeed = particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * half).length;
         }
         if (particle.svgStep === undefined) {
             particle.svgStep = (0, engine_1.randomInRange)({ min: 0, max: this._paths[particle.svgPathIndex].length }) * pxRatio;
         }
         if (particle.svgOffset === undefined) {
             particle.svgOffset = {
-                width: (0, engine_1.randomInRange)({ min: -this._width / 2, max: this._width / 2 }) * pxRatio,
-                height: (0, engine_1.randomInRange)({ min: -this._width / 2, max: this._width / 2 }) * pxRatio,
+                width: (0, engine_1.randomInRange)({ min: -this._width * half, max: this._width * half }) * pxRatio,
+                height: (0, engine_1.randomInRange)({ min: -this._width * half, max: this._width * half }) * pxRatio,
             };
         }
         if (particle.svgInitialPosition === undefined) {
@@ -44,12 +45,12 @@ class SVGPathGenerator {
         }
         let path = this._paths[particle.svgPathIndex];
         if (path) {
-            const pathLength = path.length;
+            const pathLength = path.length, indexOffset = 1;
             if (particle.svgStep >= pathLength) {
-                particle.svgPathIndex = particle.svgPathIndex + 1;
+                particle.svgPathIndex = particle.svgPathIndex + indexOffset;
                 if (particle.svgPathIndex >= this._paths.length) {
                     if (this._reverse) {
-                        particle.svgPathIndex = this._paths.length - 1;
+                        particle.svgPathIndex = this._paths.length - indexOffset;
                         particle.svgDirection = 1;
                     }
                     else {
@@ -58,15 +59,15 @@ class SVGPathGenerator {
                     }
                 }
             }
-            else if (particle.svgStep <= 0) {
-                particle.svgPathIndex = particle.svgPathIndex - 1;
-                if (particle.svgPathIndex < 0) {
+            else if (particle.svgStep <= minStep) {
+                particle.svgPathIndex = particle.svgPathIndex - indexOffset;
+                if (particle.svgPathIndex < minIndex) {
                     if (this._reverse) {
                         particle.svgPathIndex = 0;
                         particle.svgDirection = 0;
                     }
                     else {
-                        particle.svgPathIndex = this._paths.length - 1;
+                        particle.svgPathIndex = this._paths.length - indexOffset;
                         path = this._paths[particle.svgPathIndex];
                         particle.svgStep = path.length;
                     }
@@ -77,48 +78,46 @@ class SVGPathGenerator {
         if (path) {
             const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = particle.container.canvas.size, offset = (0, engine_1.getPosition)(this._offset, canvasSize), scale = this._scale * pxRatio;
             particle.position.x =
-                (pos.x - this._size.width / 2) * scale +
+                (pos.x - this._size.width * half) * scale +
                     particle.svgInitialPosition.x +
                     offset.x +
                     particle.svgOffset.width;
             particle.position.y =
-                (pos.y - this._size.height / 2) * scale +
+                (pos.y - this._size.height * half) * scale +
                     particle.svgInitialPosition.y +
                     offset.y +
                     particle.svgOffset.height;
         }
-        return engine_1.Vector.origin;
+        return Promise.resolve(engine_1.Vector.origin);
     }
-    init(container) {
+    async init(container) {
         const options = container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
         this._reverse = options.reverse ?? this._reverse;
-        this._scale = options.scale ?? 1;
+        this._scale = options.scale ?? minScale;
         this._offset.x = position.x;
         this._offset.y = position.y;
         this._offset.mode = position.mode;
-        this._width = options.width ?? 0;
+        this._width = options.width ?? minWidth;
         if (options.url && !options.path) {
             const url = options.url;
-            (async () => {
-                const response = await fetch(url), data = await response.text();
-                const parser = new DOMParser(), doc = parser.parseFromString(data, "image/svg+xml"), svg = doc.getElementsByTagName("svg")[0];
-                let svgPaths = svg.getElementsByTagName("path");
-                if (!svgPaths.length) {
-                    svgPaths = doc.getElementsByTagName("path");
-                }
-                this._paths = [];
-                for (let i = 0; i < svgPaths.length; i++) {
-                    const path = svgPaths.item(i);
-                    if (path) {
-                        this._paths.push({
-                            element: path,
-                            length: path.getTotalLength(),
-                        });
-                    }
+            const response = await fetch(url), data = await response.text();
+            const parser = new DOMParser(), doc = parser.parseFromString(data, "image/svg+xml"), firstIndex = 0, svg = doc.getElementsByTagName("svg")[firstIndex];
+            let svgPaths = svg.getElementsByTagName("path");
+            if (!svgPaths.length) {
+                svgPaths = doc.getElementsByTagName("path");
+            }
+            this._paths = [];
+            for (let i = 0; i < svgPaths.length; i++) {
+                const path = svgPaths.item(i);
+                if (path) {
+                    this._paths.push({
+                        element: path,
+                        length: path.getTotalLength(),
+                    });
                 }
-                this._size.height = parseFloat(svg.getAttribute("height") ?? "0");
-                this._size.width = parseFloat(svg.getAttribute("width") ?? "0");
-            })();
+            }
+            this._size.height = parseFloat(svg.getAttribute("height") ?? "0");
+            this._size.width = parseFloat(svg.getAttribute("width") ?? "0");
         }
         else if (options.path) {
             const path = options.path;

package/cjs/index.js

@@ -1,9 +1,32 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadSVGPath = exports.svgPathName = void 0;
-const SVGPathGenerator_js_1 = require("./SVGPathGenerator.js");
 exports.svgPathName = "svgPathGenerator";
 async function loadSVGPath(engine, refresh = true) {
-    await engine.addPathGenerator(exports.svgPathName, new SVGPathGenerator_js_1.SVGPathGenerator(), refresh);
+    const { SVGPathGenerator } = await Promise.resolve().then(() => __importStar(require("./SVGPathGenerator.js")));
+    await engine.addPathGenerator(exports.svgPathName, new SVGPathGenerator(), refresh);
 }
 exports.loadSVGPath = loadSVGPath;

package/dist_browser_SVGPathGenerator_js.js

@@ -0,0 +1,30 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v3.2.0
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_path_svg"] = this["webpackChunk_tsparticles_path_svg"] || []).push([["dist_browser_SVGPathGenerator_js"],{
+
+/***/ "./dist/browser/SVGPathGenerator.js":
+/*!******************************************!*\
+  !*** ./dist/browser/SVGPathGenerator.js ***!
+  \******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   SVGPathGenerator: () => (/* binding */ SVGPathGenerator)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nconst defaultSpeed = 1,\n  half = 0.5,\n  minStep = 0,\n  minIndex = 0,\n  minWidth = 0,\n  minScale = 1;\nclass SVGPathGenerator {\n  constructor() {\n    this._paths = [];\n    this._reverse = false;\n    this._size = {\n      width: 0,\n      height: 0\n    };\n    this._scale = 1;\n    this._offset = {\n      x: 0,\n      y: 0,\n      mode: \"percent\"\n    };\n    this._width = 0;\n  }\n  generate(particle, delta) {\n    const container = particle.container,\n      pxRatio = container.retina.pixelRatio;\n    if (particle.svgDirection === undefined) {\n      particle.svgDirection = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() > _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.halfRandom ? 0 : 1;\n    }\n    if (particle.svgPathIndex === undefined) {\n      particle.svgPathIndex = Math.floor(Math.random() * this._paths.length);\n    }\n    if (particle.svgSpeed === undefined) {\n      particle.svgSpeed = particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * half).length;\n    }\n    if (particle.svgStep === undefined) {\n      particle.svgStep = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRange)({\n        min: 0,\n        max: this._paths[particle.svgPathIndex].length\n      }) * pxRatio;\n    }\n    if (particle.svgOffset === undefined) {\n      particle.svgOffset = {\n        width: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRange)({\n          min: -this._width * half,\n          max: this._width * half\n        }) * pxRatio,\n        height: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRange)({\n          min: -this._width * half,\n          max: this._width * half\n        }) * pxRatio\n      };\n    }\n    if (particle.svgInitialPosition === undefined) {\n      particle.svgInitialPosition = {\n        ...particle.position\n      };\n    }\n    particle.velocity.x = 0;\n    particle.velocity.y = 0;\n    if (particle.svgDirection === 0) {\n      particle.svgStep += particle.svgSpeed * delta.factor;\n    } else {\n      particle.svgStep -= particle.svgSpeed * delta.factor;\n    }\n    let path = this._paths[particle.svgPathIndex];\n    if (path) {\n      const pathLength = path.length,\n        indexOffset = 1;\n      if (particle.svgStep >= pathLength) {\n        particle.svgPathIndex = particle.svgPathIndex + indexOffset;\n        if (particle.svgPathIndex >= this._paths.length) {\n          if (this._reverse) {\n            particle.svgPathIndex = this._paths.length - indexOffset;\n            particle.svgDirection = 1;\n          } else {\n            particle.svgPathIndex = 0;\n            particle.svgStep = 0;\n          }\n        }\n      } else if (particle.svgStep <= minStep) {\n        particle.svgPathIndex = particle.svgPathIndex - indexOffset;\n        if (particle.svgPathIndex < minIndex) {\n          if (this._reverse) {\n            particle.svgPathIndex = 0;\n            particle.svgDirection = 0;\n          } else {\n            particle.svgPathIndex = this._paths.length - indexOffset;\n            path = this._paths[particle.svgPathIndex];\n            particle.svgStep = path.length;\n          }\n        }\n      }\n      path = this._paths[particle.svgPathIndex];\n    }\n    if (path) {\n      const pathElement = path.element,\n        pos = pathElement.getPointAtLength(particle.svgStep),\n        canvasSize = particle.container.canvas.size,\n        offset = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getPosition)(this._offset, canvasSize),\n        scale = this._scale * pxRatio;\n      particle.position.x = (pos.x - this._size.width * half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;\n      particle.position.y = (pos.y - this._size.height * half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;\n    }\n    return Promise.resolve(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.origin);\n  }\n  async init(container) {\n    const options = container.actualOptions.particles.move.path.options,\n      position = options.position ?? this._offset;\n    this._reverse = options.reverse ?? this._reverse;\n    this._scale = options.scale ?? minScale;\n    this._offset.x = position.x;\n    this._offset.y = position.y;\n    this._offset.mode = position.mode;\n    this._width = options.width ?? minWidth;\n    if (options.url && !options.path) {\n      const url = options.url;\n      const response = await fetch(url),\n        data = await response.text();\n      const parser = new DOMParser(),\n        doc = parser.parseFromString(data, \"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      this._size.height = parseFloat(svg.getAttribute(\"height\") ?? \"0\");\n      this._size.width = parseFloat(svg.getAttribute(\"width\") ?? \"0\");\n    } else if (options.path) {\n      const path = options.path;\n      this._paths = [];\n      for (const item of path.data) {\n        const element = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n        element.setAttribute(\"d\", item);\n        this._paths.push({\n          element,\n          length: element.getTotalLength()\n        });\n      }\n      this._size.height = path.size.height;\n      this._size.width = path.size.width;\n    }\n  }\n  reset() {}\n  update() {}\n}\n\n//# sourceURL=webpack://@tsparticles/path-svg/./dist/browser/SVGPathGenerator.js?");
+
+/***/ })
+
+}]);

package/esm/SVGPathGenerator.js

@@ -1,4 +1,5 @@
-import { Vector, getPosition, getRandom, randomInRange, } from "@tsparticles/engine";
+import { Vector, getPosition, getRandom, halfRandom, randomInRange, } from "@tsparticles/engine";
+const defaultSpeed = 1, half = 0.5, minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
 export class SVGPathGenerator {
     constructor() {
         this._paths = [];
@@ -11,21 +12,21 @@ export class SVGPathGenerator {
     generate(particle, delta) {
         const container = particle.container, pxRatio = container.retina.pixelRatio;
         if (particle.svgDirection === undefined) {
-            particle.svgDirection = getRandom() > 0.5 ? 0 : 1;
+            particle.svgDirection = getRandom() > halfRandom ? 0 : 1;
         }
         if (particle.svgPathIndex === undefined) {
             particle.svgPathIndex = Math.floor(Math.random() * this._paths.length);
         }
         if (particle.svgSpeed === undefined) {
-            particle.svgSpeed = particle.velocity.mult((particle.retina.moveSpeed ?? 1) / 2).length;
+            particle.svgSpeed = particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * half).length;
         }
         if (particle.svgStep === undefined) {
             particle.svgStep = randomInRange({ min: 0, max: this._paths[particle.svgPathIndex].length }) * pxRatio;
         }
         if (particle.svgOffset === undefined) {
             particle.svgOffset = {
-                width: randomInRange({ min: -this._width / 2, max: this._width / 2 }) * pxRatio,
-                height: randomInRange({ min: -this._width / 2, max: this._width / 2 }) * pxRatio,
+                width: randomInRange({ min: -this._width * half, max: this._width * half }) * pxRatio,
+                height: randomInRange({ min: -this._width * half, max: this._width * half }) * pxRatio,
             };
         }
         if (particle.svgInitialPosition === undefined) {
@@ -41,12 +42,12 @@ export class SVGPathGenerator {
         }
         let path = this._paths[particle.svgPathIndex];
         if (path) {
-            const pathLength = path.length;
+            const pathLength = path.length, indexOffset = 1;
             if (particle.svgStep >= pathLength) {
-                particle.svgPathIndex = particle.svgPathIndex + 1;
+                particle.svgPathIndex = particle.svgPathIndex + indexOffset;
                 if (particle.svgPathIndex >= this._paths.length) {
                     if (this._reverse) {
-                        particle.svgPathIndex = this._paths.length - 1;
+                        particle.svgPathIndex = this._paths.length - indexOffset;
                         particle.svgDirection = 1;
                     }
                     else {
@@ -55,15 +56,15 @@ export class SVGPathGenerator {
                     }
                 }
             }
-            else if (particle.svgStep <= 0) {
-                particle.svgPathIndex = particle.svgPathIndex - 1;
-                if (particle.svgPathIndex < 0) {
+            else if (particle.svgStep <= minStep) {
+                particle.svgPathIndex = particle.svgPathIndex - indexOffset;
+                if (particle.svgPathIndex < minIndex) {
                     if (this._reverse) {
                         particle.svgPathIndex = 0;
                         particle.svgDirection = 0;
                     }
                     else {
-                        particle.svgPathIndex = this._paths.length - 1;
+                        particle.svgPathIndex = this._paths.length - indexOffset;
                         path = this._paths[particle.svgPathIndex];
                         particle.svgStep = path.length;
                     }
@@ -74,48 +75,46 @@ export class SVGPathGenerator {
         if (path) {
             const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = particle.container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
             particle.position.x =
-                (pos.x - this._size.width / 2) * scale +
+                (pos.x - this._size.width * half) * scale +
                     particle.svgInitialPosition.x +
                     offset.x +
                     particle.svgOffset.width;
             particle.position.y =
-                (pos.y - this._size.height / 2) * scale +
+                (pos.y - this._size.height * half) * scale +
                     particle.svgInitialPosition.y +
                     offset.y +
                     particle.svgOffset.height;
         }
-        return Vector.origin;
+        return Promise.resolve(Vector.origin);
     }
-    init(container) {
+    async init(container) {
         const options = container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
         this._reverse = options.reverse ?? this._reverse;
-        this._scale = options.scale ?? 1;
+        this._scale = options.scale ?? minScale;
         this._offset.x = position.x;
         this._offset.y = position.y;
         this._offset.mode = position.mode;
-        this._width = options.width ?? 0;
+        this._width = options.width ?? minWidth;
         if (options.url && !options.path) {
             const url = options.url;
-            (async () => {
-                const response = await fetch(url), data = await response.text();
-                const parser = new DOMParser(), doc = parser.parseFromString(data, "image/svg+xml"), svg = doc.getElementsByTagName("svg")[0];
-                let svgPaths = svg.getElementsByTagName("path");
-                if (!svgPaths.length) {
-                    svgPaths = doc.getElementsByTagName("path");
-                }
-                this._paths = [];
-                for (let i = 0; i < svgPaths.length; i++) {
-                    const path = svgPaths.item(i);
-                    if (path) {
-                        this._paths.push({
-                            element: path,
-                            length: path.getTotalLength(),
-                        });
-                    }
+            const response = await fetch(url), data = await response.text();
+            const parser = new DOMParser(), doc = parser.parseFromString(data, "image/svg+xml"), firstIndex = 0, svg = doc.getElementsByTagName("svg")[firstIndex];
+            let svgPaths = svg.getElementsByTagName("path");
+            if (!svgPaths.length) {
+                svgPaths = doc.getElementsByTagName("path");
+            }
+            this._paths = [];
+            for (let i = 0; i < svgPaths.length; i++) {
+                const path = svgPaths.item(i);
+                if (path) {
+                    this._paths.push({
+                        element: path,
+                        length: path.getTotalLength(),
+                    });
                 }
-                this._size.height = parseFloat(svg.getAttribute("height") ?? "0");
-                this._size.width = parseFloat(svg.getAttribute("width") ?? "0");
-            })();
+            }
+            this._size.height = parseFloat(svg.getAttribute("height") ?? "0");
+            this._size.width = parseFloat(svg.getAttribute("width") ?? "0");
         }
         else if (options.path) {
             const path = options.path;

package/esm/index.js

@@ -1,5 +1,5 @@
-import { SVGPathGenerator } from "./SVGPathGenerator.js";
 export const svgPathName = "svgPathGenerator";
 export async function loadSVGPath(engine, refresh = true) {
+    const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
     await engine.addPathGenerator(svgPathName, new SVGPathGenerator(), refresh);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/path-svg",
-  "version": "3.0.3",
+  "version": "3.2.0",
   "description": "tsParticles svg path",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -101,7 +101,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.3"
+    "@tsparticles/engine": "^3.2.0"
   },
   "publishConfig": {
     "access": "public"

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/path-svg [26 Dec 2023 at 19:27]</title>
+    <title>@tsparticles/path-svg [31 Jan 2024 at 02:05]</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>
@@ -31,8 +31,8 @@
   <body>
     <div id="app"></div>
     <script>
-      window.chartData = [{"label":"tsparticles.path.svg.js","isAsset":true,"statSize":5423,"parsedSize":9335,"gzipSize":2658,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":5381,"groups":[{"id":278,"label":"index.js + 1 modules (concatenated)","path":"./dist/browser/index.js + 1 modules (concatenated)","statSize":5381,"parsedSize":9335,"gzipSize":2658,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser","statSize":5381,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/index.js","statSize":245,"parsedSize":425,"gzipSize":121,"inaccurateSizes":true},{"id":null,"label":"SVGPathGenerator.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/SVGPathGenerator.js","statSize":5136,"parsedSize":8909,"gzipSize":2536,"inaccurateSizes":true}],"parsedSize":9335,"gzipSize":2658,"inaccurateSizes":true}]}],"parsedSize":9335,"gzipSize":2658},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.path.svg":true}}];
-      window.entrypoints = ["tsparticles.path.svg","tsparticles.path.svg.min"];
+      window.chartData = [];
+      window.entrypoints = ["tsparticles.path.svg.min"];
       window.defaultSizes = "parsed";
     </script>
   </body>