@tsparticles/path-svg 4.0.0-alpha.8 → 4.0.0-beta.0

package/266.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_path_svg=this.webpackChunk_tsparticles_path_svg||[]).push([[266],{266(t,e,s){s.d(e,{SVGPathGenerator:()=>n});var i,h,a=s(303);(i=h||(h={}))[i.normal=0]="normal",i[i.reverse=1]="reverse";class n{_container;_offset;_paths;_res;_reverse;_scale;_size;_width;constructor(t){this._container=t,this._paths=[],this._reverse=!1,this._size={width:0,height:0},this._scale=1,this._offset={x:0,y:0,mode:a.PixelMode.percent},this._width=0,this._res=a.Vector.origin}generate(t,e){let s=this._container.retina.pixelRatio;t.svgDirection??=(0,a.getRandom)()>a.half?h.normal:h.reverse,t.svgPathIndex??=Math.floor((0,a.getRandom)()*this._paths.length),t.svgSpeed??=t.velocity.mult((t.retina.moveSpeed??1)*a.half).length,t.svgStep??=(0,a.randomInRangeValue)({min:0,max:this._paths[t.svgPathIndex].length})*s,t.svgOffset??={width:(0,a.randomInRangeValue)({min:-this._width*a.half,max:this._width*a.half})*s,height:(0,a.randomInRangeValue)({min:-this._width*a.half,max:this._width*a.half})*s},t.svgInitialPosition??=t.position.copy(),t.velocity.x=0,t.velocity.y=0,t.svgDirection===h.normal?t.svgStep+=t.svgSpeed*e.factor:t.svgStep-=t.svgSpeed*e.factor;let i=this._paths[t.svgPathIndex],n=i.length;t.svgStep>=n?(t.svgPathIndex=t.svgPathIndex+1,t.svgPathIndex>=this._paths.length&&(this._reverse?(t.svgPathIndex=this._paths.length-1,t.svgDirection=h.reverse):(t.svgPathIndex=0,t.svgStep=0))):t.svgStep<=0&&(t.svgPathIndex=t.svgPathIndex-1,t.svgPathIndex<0&&(this._reverse?(t.svgPathIndex=0,t.svgDirection=h.normal):(t.svgPathIndex=this._paths.length-1,i=this._paths[t.svgPathIndex],t.svgStep=i.length)));let r=(i=this._paths[t.svgPathIndex]).element.getPointAtLength(t.svgStep),g=this._container.canvas.size,o=(0,a.getPosition)(this._offset,g),l=this._scale*s;return t.position.x=(r.x-this._size.width*a.half)*l+t.svgInitialPosition.x+o.x+t.svgOffset.width,t.position.y=(r.y-this._size.height*a.half)*l+t.svgInitialPosition.y+o.y+t.svgOffset.height,this._res.x=0,this._res.y=0,this._res}init(){let t=this._container.actualOptions.particles.move.path.options,e=t.position??this._offset;if(this._reverse=t.reverse??this._reverse,this._scale=t.scale??1,this._offset.x=e.x,this._offset.y=e.y,this._offset.mode=e.mode,this._width=t.width??0,t.url&&!t.path){let e=t.url;(async()=>{let t=await fetch(e),{paths:s,size:i}=function(t){let e=new DOMParser().parseFromString(t,"image/svg+xml").querySelector("svg");if(!e)return{paths:[],size:{width:0,height:0}};let s=e.querySelectorAll("path"),i=[];for(let t of s)t instanceof SVGPathElement&&i.push({element:t,length:t.getTotalLength()});return{paths:i,size:{width:Number.parseFloat(e.getAttribute("width")??"0"),height:Number.parseFloat(e.getAttribute("height")??"0")}}}(await t.text());this._paths=s,this._size.width=i.width,this._size.height=i.height})()}else if(t.path){var s;let e,i=t.path;this._paths=(s=t.path.data,e=(0,a.safeDocument)(),s.map(t=>{let s=e.createElementNS("http://www.w3.org/2000/svg","path");return s.setAttribute("d",t),{element:s,length:s.getTotalLength()}})),this._size.height=i.size.height,this._size.width=i.size.width}}reset(){}update(){}}}}]);

package/browser/SVGPathGenerator.js

@@ -1,4 +1,6 @@
-import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, safeDocument, } from "@tsparticles/engine";
+import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, } from "@tsparticles/engine";
+import { createSVGPaths } from "./createSVGPaths.js";
+import { loadSVGFromString } from "./loadSVGFromString.js";
 var SVGPathDirection;
 (function (SVGPathDirection) {
     SVGPathDirection[SVGPathDirection["normal"] = 0] = "normal";
@@ -6,16 +8,26 @@ var SVGPathDirection;
 })(SVGPathDirection || (SVGPathDirection = {}));
 const defaultSpeed = 1, minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
 export class SVGPathGenerator {
-    constructor() {
+    _container;
+    _offset;
+    _paths;
+    _res;
+    _reverse;
+    _scale;
+    _size;
+    _width;
+    constructor(container) {
+        this._container = container;
         this._paths = [];
         this._reverse = false;
         this._size = { width: 0, height: 0 };
         this._scale = 1;
         this._offset = { x: 0, y: 0, mode: PixelMode.percent };
         this._width = 0;
+        this._res = Vector.origin;
     }
     generate(particle, delta) {
-        const container = particle.container, pxRatio = container.retina.pixelRatio;
+        const container = this._container, pxRatio = container.retina.pixelRatio;
         particle.svgDirection ??= getRandom() > half ? SVGPathDirection.normal : SVGPathDirection.reverse;
         particle.svgPathIndex ??= Math.floor(getRandom() * this._paths.length);
         particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * half).length;
@@ -63,15 +75,17 @@ export class SVGPathGenerator {
             }
         }
         path = this._paths[particle.svgPathIndex];
-        const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = particle.container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
+        const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this._container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
         particle.position.x =
             (pos.x - this._size.width * half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;
         particle.position.y =
             (pos.y - this._size.height * half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;
-        return Vector.origin;
+        this._res.x = 0;
+        this._res.y = 0;
+        return this._res;
     }
-    init(container) {
-        const options = container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
+    init() {
+        const options = this._container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
         this._reverse = options.reverse ?? this._reverse;
         this._scale = options.scale ?? minScale;
         this._offset.x = position.x;
@@ -81,37 +95,15 @@ export class SVGPathGenerator {
         if (options.url && !options.path) {
             const url = options.url;
             void (async () => {
-                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 = Number.parseFloat(svg.getAttribute("height") ?? "0");
-                this._size.width = Number.parseFloat(svg.getAttribute("width") ?? "0");
+                const response = await fetch(url), data = await response.text(), { paths, size } = loadSVGFromString(data);
+                this._paths = paths;
+                this._size.width = size.width;
+                this._size.height = size.height;
             })();
         }
         else if (options.path) {
             const path = options.path;
-            this._paths = [];
-            for (const item of path.data) {
-                const element = safeDocument().createElementNS("http://www.w3.org/2000/svg", "path");
-                element.setAttribute("d", item);
-                this._paths.push({
-                    element,
-                    length: element.getTotalLength(),
-                });
-            }
+            this._paths = createSVGPaths(options.path.data);
             this._size.height = path.size.height;
             this._size.width = path.size.width;
         }

package/browser/createSVGPaths.js

@@ -0,0 +1,12 @@
+import { safeDocument } from "@tsparticles/engine";
+export function createSVGPaths(data) {
+    const doc = safeDocument();
+    return data.map(d => {
+        const element = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+        element.setAttribute("d", d);
+        return {
+            element,
+            length: element.getTotalLength(),
+        };
+    });
+}

package/browser/index.js

@@ -1,8 +1,12 @@
 export const svgPathName = "svgPathGenerator";
 export async function loadSVGPath(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
-        e.addPathGenerator(svgPathName, new SVGPathGenerator());
+        const { ensureBaseMoverLoaded } = await import("@tsparticles/plugin-move");
+        ensureBaseMoverLoaded(e);
+        e.addPathGenerator?.(svgPathName, async (container) => {
+            const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
+            return new SVGPathGenerator(container);
+        });
     });
 }

package/browser/loadSVGFromString.js

@@ -0,0 +1,24 @@
+export function loadSVGFromString(svgText) {
+    const parser = new DOMParser(), doc = parser.parseFromString(svgText, "image/svg+xml"), svg = doc.querySelector("svg");
+    if (!svg) {
+        return { paths: [], size: { width: 0, height: 0 } };
+    }
+    const pathElements = svg.querySelectorAll("path"), paths = [];
+    for (const node of pathElements) {
+        if (!(node instanceof SVGPathElement)) {
+            continue;
+        }
+        paths.push({
+            element: node,
+            length: node.getTotalLength(),
+        });
+    }
+    const size = {
+        width: Number.parseFloat(svg.getAttribute("width") ?? "0"),
+        height: Number.parseFloat(svg.getAttribute("height") ?? "0"),
+    };
+    return {
+        paths,
+        size,
+    };
+}

package/browser/types.js

@@ -0,0 +1 @@
+export {};

package/cjs/SVGPathGenerator.js

@@ -1,4 +1,6 @@
-import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, safeDocument, } from "@tsparticles/engine";
+import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, } from "@tsparticles/engine";
+import { createSVGPaths } from "./createSVGPaths.js";
+import { loadSVGFromString } from "./loadSVGFromString.js";
 var SVGPathDirection;
 (function (SVGPathDirection) {
     SVGPathDirection[SVGPathDirection["normal"] = 0] = "normal";
@@ -6,16 +8,26 @@ var SVGPathDirection;
 })(SVGPathDirection || (SVGPathDirection = {}));
 const defaultSpeed = 1, minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
 export class SVGPathGenerator {
-    constructor() {
+    _container;
+    _offset;
+    _paths;
+    _res;
+    _reverse;
+    _scale;
+    _size;
+    _width;
+    constructor(container) {
+        this._container = container;
         this._paths = [];
         this._reverse = false;
         this._size = { width: 0, height: 0 };
         this._scale = 1;
         this._offset = { x: 0, y: 0, mode: PixelMode.percent };
         this._width = 0;
+        this._res = Vector.origin;
     }
     generate(particle, delta) {
-        const container = particle.container, pxRatio = container.retina.pixelRatio;
+        const container = this._container, pxRatio = container.retina.pixelRatio;
         particle.svgDirection ??= getRandom() > half ? SVGPathDirection.normal : SVGPathDirection.reverse;
         particle.svgPathIndex ??= Math.floor(getRandom() * this._paths.length);
         particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * half).length;
@@ -63,15 +75,17 @@ export class SVGPathGenerator {
             }
         }
         path = this._paths[particle.svgPathIndex];
-        const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = particle.container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
+        const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this._container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
         particle.position.x =
             (pos.x - this._size.width * half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;
         particle.position.y =
             (pos.y - this._size.height * half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;
-        return Vector.origin;
+        this._res.x = 0;
+        this._res.y = 0;
+        return this._res;
     }
-    init(container) {
-        const options = container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
+    init() {
+        const options = this._container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
         this._reverse = options.reverse ?? this._reverse;
         this._scale = options.scale ?? minScale;
         this._offset.x = position.x;
@@ -81,37 +95,15 @@ export class SVGPathGenerator {
         if (options.url && !options.path) {
             const url = options.url;
             void (async () => {
-                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 = Number.parseFloat(svg.getAttribute("height") ?? "0");
-                this._size.width = Number.parseFloat(svg.getAttribute("width") ?? "0");
+                const response = await fetch(url), data = await response.text(), { paths, size } = loadSVGFromString(data);
+                this._paths = paths;
+                this._size.width = size.width;
+                this._size.height = size.height;
             })();
         }
         else if (options.path) {
             const path = options.path;
-            this._paths = [];
-            for (const item of path.data) {
-                const element = safeDocument().createElementNS("http://www.w3.org/2000/svg", "path");
-                element.setAttribute("d", item);
-                this._paths.push({
-                    element,
-                    length: element.getTotalLength(),
-                });
-            }
+            this._paths = createSVGPaths(options.path.data);
             this._size.height = path.size.height;
             this._size.width = path.size.width;
         }

package/cjs/createSVGPaths.js

@@ -0,0 +1,12 @@
+import { safeDocument } from "@tsparticles/engine";
+export function createSVGPaths(data) {
+    const doc = safeDocument();
+    return data.map(d => {
+        const element = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+        element.setAttribute("d", d);
+        return {
+            element,
+            length: element.getTotalLength(),
+        };
+    });
+}

package/cjs/index.js

@@ -1,8 +1,12 @@
 export const svgPathName = "svgPathGenerator";
 export async function loadSVGPath(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
-        e.addPathGenerator(svgPathName, new SVGPathGenerator());
+        const { ensureBaseMoverLoaded } = await import("@tsparticles/plugin-move");
+        ensureBaseMoverLoaded(e);
+        e.addPathGenerator?.(svgPathName, async (container) => {
+            const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
+            return new SVGPathGenerator(container);
+        });
     });
 }

package/cjs/loadSVGFromString.js

@@ -0,0 +1,24 @@
+export function loadSVGFromString(svgText) {
+    const parser = new DOMParser(), doc = parser.parseFromString(svgText, "image/svg+xml"), svg = doc.querySelector("svg");
+    if (!svg) {
+        return { paths: [], size: { width: 0, height: 0 } };
+    }
+    const pathElements = svg.querySelectorAll("path"), paths = [];
+    for (const node of pathElements) {
+        if (!(node instanceof SVGPathElement)) {
+            continue;
+        }
+        paths.push({
+            element: node,
+            length: node.getTotalLength(),
+        });
+    }
+    const size = {
+        width: Number.parseFloat(svg.getAttribute("width") ?? "0"),
+        height: Number.parseFloat(svg.getAttribute("height") ?? "0"),
+    };
+    return {
+        paths,
+        size,
+    };
+}

package/cjs/types.js

@@ -0,0 +1 @@
+export {};

package/dist_browser_SVGPathGenerator_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
- * v4.0.0-alpha.8
+ * v4.0.0-beta.0
  */
 "use strict";
 /*
@@ -23,7 +23,27 @@
   \******************************************/
 (__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 */   SVGPathGenerator: () => (/* binding */ SVGPathGenerator)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nvar SVGPathDirection;\n(function (SVGPathDirection) {\n  SVGPathDirection[SVGPathDirection[\"normal\"] = 0] = \"normal\";\n  SVGPathDirection[SVGPathDirection[\"reverse\"] = 1] = \"reverse\";\n})(SVGPathDirection || (SVGPathDirection = {}));\nconst defaultSpeed = 1,\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: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.PixelMode.percent\n    };\n    this._width = 0;\n  }\n  generate(particle, delta) {\n    const container = particle.container,\n      pxRatio = container.retina.pixelRatio;\n    particle.svgDirection ??= (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() > _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half ? SVGPathDirection.normal : SVGPathDirection.reverse;\n    particle.svgPathIndex ??= Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * this._paths.length);\n    particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half).length;\n    particle.svgStep ??= (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n      min: 0,\n      max: this._paths[particle.svgPathIndex].length\n    }) * pxRatio;\n    particle.svgOffset ??= {\n      width: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n        min: -this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n        max: this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n      }) * pxRatio,\n      height: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n        min: -this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n        max: this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n      }) * pxRatio\n    };\n    particle.svgInitialPosition ??= particle.position.copy();\n    particle.velocity.x = 0;\n    particle.velocity.y = 0;\n    if (particle.svgDirection === SVGPathDirection.normal) {\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    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 = SVGPathDirection.reverse;\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 = SVGPathDirection.normal;\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    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 * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;\n    particle.position.y = (pos.y - this._size.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;\n    return _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n  }\n  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      void (async () => {\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 = Number.parseFloat(svg.getAttribute(\"height\") ?? \"0\");\n        this._size.width = Number.parseFloat(svg.getAttribute(\"width\") ?? \"0\");\n      })();\n    } else if (options.path) {\n      const path = options.path;\n      this._paths = [];\n      for (const item of path.data) {\n        const element = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().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?\n}");
+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 _createSVGPaths_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./createSVGPaths.js */ \"./dist/browser/createSVGPaths.js\");\n/* harmony import */ var _loadSVGFromString_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./loadSVGFromString.js */ \"./dist/browser/loadSVGFromString.js\");\n\n\n\nvar SVGPathDirection;\n(function(SVGPathDirection) {\n    SVGPathDirection[SVGPathDirection[\"normal\"] = 0] = \"normal\";\n    SVGPathDirection[SVGPathDirection[\"reverse\"] = 1] = \"reverse\";\n})(SVGPathDirection || (SVGPathDirection = {}));\nconst defaultSpeed = 1, minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;\nclass SVGPathGenerator {\n    _container;\n    _offset;\n    _paths;\n    _res;\n    _reverse;\n    _scale;\n    _size;\n    _width;\n    constructor(container){\n        this._container = container;\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: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.PixelMode.percent\n        };\n        this._width = 0;\n        this._res = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n    }\n    generate(particle, delta) {\n        const container = this._container, pxRatio = container.retina.pixelRatio;\n        particle.svgDirection ??= (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() > _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half ? SVGPathDirection.normal : SVGPathDirection.reverse;\n        particle.svgPathIndex ??= Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * this._paths.length);\n        particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half).length;\n        particle.svgStep ??= (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n            min: 0,\n            max: this._paths[particle.svgPathIndex].length\n        }) * pxRatio;\n        particle.svgOffset ??= {\n            width: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n                min: -this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n                max: this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n            }) * pxRatio,\n            height: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n                min: -this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n                max: this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n            }) * pxRatio\n        };\n        particle.svgInitialPosition ??= particle.position.copy();\n        particle.velocity.x = 0;\n        particle.velocity.y = 0;\n        if (particle.svgDirection === SVGPathDirection.normal) {\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        const pathLength = path.length, 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 = SVGPathDirection.reverse;\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 = SVGPathDirection.normal;\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        const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this._container.canvas.size, offset = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getPosition)(this._offset, canvasSize), scale = this._scale * pxRatio;\n        particle.position.x = (pos.x - this._size.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;\n        particle.position.y = (pos.y - this._size.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;\n        this._res.x = 0;\n        this._res.y = 0;\n        return this._res;\n    }\n    init() {\n        const options = this._container.actualOptions.particles.move.path.options, 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            void (async ()=>{\n                const response = await fetch(url), data = await response.text(), { paths, size } = (0,_loadSVGFromString_js__WEBPACK_IMPORTED_MODULE_2__.loadSVGFromString)(data);\n                this._paths = paths;\n                this._size.width = size.width;\n                this._size.height = size.height;\n            })();\n        } else if (options.path) {\n            const path = options.path;\n            this._paths = (0,_createSVGPaths_js__WEBPACK_IMPORTED_MODULE_1__.createSVGPaths)(options.path.data);\n            this._size.height = path.size.height;\n            this._size.width = path.size.width;\n        }\n    }\n    reset() {}\n    update() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/path-svg/./dist/browser/SVGPathGenerator.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/createSVGPaths.js"
+/*!****************************************!*\
+  !*** ./dist/browser/createSVGPaths.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 */   createSVGPaths: () => (/* binding */ createSVGPaths)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nfunction createSVGPaths(data) {\n    const doc = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)();\n    return data.map((d)=>{\n        const element = doc.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n        element.setAttribute(\"d\", d);\n        return {\n            element,\n            length: element.getTotalLength()\n        };\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/path-svg/./dist/browser/createSVGPaths.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/loadSVGFromString.js"
+/*!*******************************************!*\
+  !*** ./dist/browser/loadSVGFromString.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 */   loadSVGFromString: () => (/* binding */ loadSVGFromString)\n/* harmony export */ });\nfunction loadSVGFromString(svgText) {\n    const parser = new DOMParser(), doc = parser.parseFromString(svgText, \"image/svg+xml\"), svg = doc.querySelector(\"svg\");\n    if (!svg) {\n        return {\n            paths: [],\n            size: {\n                width: 0,\n                height: 0\n            }\n        };\n    }\n    const pathElements = svg.querySelectorAll(\"path\"), paths = [];\n    for (const node of pathElements){\n        if (!(node instanceof SVGPathElement)) {\n            continue;\n        }\n        paths.push({\n            element: node,\n            length: node.getTotalLength()\n        });\n    }\n    const size = {\n        width: Number.parseFloat(svg.getAttribute(\"width\") ?? \"0\"),\n        height: Number.parseFloat(svg.getAttribute(\"height\") ?? \"0\")\n    };\n    return {\n        paths,\n        size\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/path-svg/./dist/browser/loadSVGFromString.js?\n}");
 
 /***/ }
 

package/esm/SVGPathGenerator.js

@@ -1,4 +1,6 @@
-import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, safeDocument, } from "@tsparticles/engine";
+import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, } from "@tsparticles/engine";
+import { createSVGPaths } from "./createSVGPaths.js";
+import { loadSVGFromString } from "./loadSVGFromString.js";
 var SVGPathDirection;
 (function (SVGPathDirection) {
     SVGPathDirection[SVGPathDirection["normal"] = 0] = "normal";
@@ -6,16 +8,26 @@ var SVGPathDirection;
 })(SVGPathDirection || (SVGPathDirection = {}));
 const defaultSpeed = 1, minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
 export class SVGPathGenerator {
-    constructor() {
+    _container;
+    _offset;
+    _paths;
+    _res;
+    _reverse;
+    _scale;
+    _size;
+    _width;
+    constructor(container) {
+        this._container = container;
         this._paths = [];
         this._reverse = false;
         this._size = { width: 0, height: 0 };
         this._scale = 1;
         this._offset = { x: 0, y: 0, mode: PixelMode.percent };
         this._width = 0;
+        this._res = Vector.origin;
     }
     generate(particle, delta) {
-        const container = particle.container, pxRatio = container.retina.pixelRatio;
+        const container = this._container, pxRatio = container.retina.pixelRatio;
         particle.svgDirection ??= getRandom() > half ? SVGPathDirection.normal : SVGPathDirection.reverse;
         particle.svgPathIndex ??= Math.floor(getRandom() * this._paths.length);
         particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * half).length;
@@ -63,15 +75,17 @@ export class SVGPathGenerator {
             }
         }
         path = this._paths[particle.svgPathIndex];
-        const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = particle.container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
+        const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this._container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
         particle.position.x =
             (pos.x - this._size.width * half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;
         particle.position.y =
             (pos.y - this._size.height * half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;
-        return Vector.origin;
+        this._res.x = 0;
+        this._res.y = 0;
+        return this._res;
     }
-    init(container) {
-        const options = container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
+    init() {
+        const options = this._container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
         this._reverse = options.reverse ?? this._reverse;
         this._scale = options.scale ?? minScale;
         this._offset.x = position.x;
@@ -81,37 +95,15 @@ export class SVGPathGenerator {
         if (options.url && !options.path) {
             const url = options.url;
             void (async () => {
-                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 = Number.parseFloat(svg.getAttribute("height") ?? "0");
-                this._size.width = Number.parseFloat(svg.getAttribute("width") ?? "0");
+                const response = await fetch(url), data = await response.text(), { paths, size } = loadSVGFromString(data);
+                this._paths = paths;
+                this._size.width = size.width;
+                this._size.height = size.height;
             })();
         }
         else if (options.path) {
             const path = options.path;
-            this._paths = [];
-            for (const item of path.data) {
-                const element = safeDocument().createElementNS("http://www.w3.org/2000/svg", "path");
-                element.setAttribute("d", item);
-                this._paths.push({
-                    element,
-                    length: element.getTotalLength(),
-                });
-            }
+            this._paths = createSVGPaths(options.path.data);
             this._size.height = path.size.height;
             this._size.width = path.size.width;
         }

package/esm/createSVGPaths.js

@@ -0,0 +1,12 @@
+import { safeDocument } from "@tsparticles/engine";
+export function createSVGPaths(data) {
+    const doc = safeDocument();
+    return data.map(d => {
+        const element = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+        element.setAttribute("d", d);
+        return {
+            element,
+            length: element.getTotalLength(),
+        };
+    });
+}

package/esm/index.js

@@ -1,8 +1,12 @@
 export const svgPathName = "svgPathGenerator";
 export async function loadSVGPath(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
-        e.addPathGenerator(svgPathName, new SVGPathGenerator());
+        const { ensureBaseMoverLoaded } = await import("@tsparticles/plugin-move");
+        ensureBaseMoverLoaded(e);
+        e.addPathGenerator?.(svgPathName, async (container) => {
+            const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
+            return new SVGPathGenerator(container);
+        });
     });
 }

package/esm/loadSVGFromString.js

@@ -0,0 +1,24 @@
+export function loadSVGFromString(svgText) {
+    const parser = new DOMParser(), doc = parser.parseFromString(svgText, "image/svg+xml"), svg = doc.querySelector("svg");
+    if (!svg) {
+        return { paths: [], size: { width: 0, height: 0 } };
+    }
+    const pathElements = svg.querySelectorAll("path"), paths = [];
+    for (const node of pathElements) {
+        if (!(node instanceof SVGPathElement)) {
+            continue;
+        }
+        paths.push({
+            element: node,
+            length: node.getTotalLength(),
+        });
+    }
+    const size = {
+        width: Number.parseFloat(svg.getAttribute("width") ?? "0"),
+        height: Number.parseFloat(svg.getAttribute("height") ?? "0"),
+    };
+    return {
+        paths,
+        size,
+    };
+}

package/esm/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/path-svg",
-  "version": "4.0.0-alpha.8",
+  "version": "4.0.0-beta.0",
   "description": "tsParticles svg path",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -101,7 +101,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.8"
+    "@tsparticles/engine": "4.0.0-beta.0",
+    "@tsparticles/plugin-move": "4.0.0-beta.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 [23 Jan 2026 at 23:41]</title>
+    <title>@tsparticles/path-svg [19 Mar 2026 at 14:01]</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/tsparticles.path.svg.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
- * v4.0.0-alpha.8
+ * v4.0.0-beta.0
  */
 /*
  * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
@@ -16,28 +16,18 @@
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("@tsparticles/engine"));
+		module.exports = factory(require("@tsparticles/plugin-move"), require("@tsparticles/engine"));
 	else if(typeof define === 'function' && define.amd)
-		define(["@tsparticles/engine"], factory);
+		define(["@tsparticles/plugin-move", "@tsparticles/engine"], factory);
 	else {
-		var a = typeof exports === 'object' ? factory(require("@tsparticles/engine")) : factory(root["window"]);
+		var a = typeof exports === 'object' ? factory(require("@tsparticles/plugin-move"), require("@tsparticles/engine")) : factory(root["window"], root["window"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(this, (__WEBPACK_EXTERNAL_MODULE__tsparticles_engine__) => {
+})(this, (__WEBPACK_EXTERNAL_MODULE__tsparticles_plugin_move__, __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ "./dist/browser/index.js"
-/*!*******************************!*\
-  !*** ./dist/browser/index.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 */   loadSVGPath: () => (/* binding */ loadSVGPath),\n/* harmony export */   svgPathName: () => (/* binding */ svgPathName)\n/* harmony export */ });\nconst svgPathName = \"svgPathGenerator\";\nasync function loadSVGPath(engine) {\n  engine.checkVersion(\"4.0.0-alpha.8\");\n  await engine.register(async e => {\n    const {\n      SVGPathGenerator\n    } = await __webpack_require__.e(/*! import() */ \"dist_browser_SVGPathGenerator_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./SVGPathGenerator.js */ \"./dist/browser/SVGPathGenerator.js\"));\n    e.addPathGenerator(svgPathName, new SVGPathGenerator());\n  });\n}\n\n//# sourceURL=webpack://@tsparticles/path-svg/./dist/browser/index.js?\n}");
-
-/***/ },
-
 /***/ "@tsparticles/engine"
 /*!*********************************************************************************************************************************!*\
   !*** external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"} ***!
@@ -46,6 +36,26 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 
 module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
 
+/***/ },
+
+/***/ "@tsparticles/plugin-move"
+/*!************************************************************************************************************************************************!*\
+  !*** external {"commonjs":"@tsparticles/plugin-move","commonjs2":"@tsparticles/plugin-move","amd":"@tsparticles/plugin-move","root":"window"} ***!
+  \************************************************************************************************************************************************/
+(module) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_plugin_move__;
+
+/***/ },
+
+/***/ "./dist/browser/index.js"
+/*!*******************************!*\
+  !*** ./dist/browser/index.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 */   loadSVGPath: () => (/* binding */ loadSVGPath),\n/* harmony export */   svgPathName: () => (/* binding */ svgPathName)\n/* harmony export */ });\nconst svgPathName = \"svgPathGenerator\";\nasync function loadSVGPath(engine) {\n    engine.checkVersion(\"4.0.0-beta.0\");\n    await engine.register(async (e)=>{\n        const { ensureBaseMoverLoaded } = await Promise.resolve(/*! import() */).then(__webpack_require__.t.bind(__webpack_require__, /*! @tsparticles/plugin-move */ \"@tsparticles/plugin-move\", 19));\n        ensureBaseMoverLoaded(e);\n        e.addPathGenerator?.(svgPathName, async (container)=>{\n            const { SVGPathGenerator } = await __webpack_require__.e(/*! import() */ \"dist_browser_SVGPathGenerator_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./SVGPathGenerator.js */ \"./dist/browser/SVGPathGenerator.js\"));\n            return new SVGPathGenerator(container);\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/path-svg/./dist/browser/index.js?\n}");
+
 /***/ }
 
 /******/ 	});
@@ -60,12 +70,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
 /******/ 		if (cachedModule !== undefined) {
 /******/ 			return cachedModule.exports;
 /******/ 		}
-/******/ 		// Check if module exists (development only)
-/******/ 		if (__webpack_modules__[moduleId] === undefined) {
-/******/ 			var e = new Error("Cannot find module '" + moduleId + "'");
-/******/ 			e.code = 'MODULE_NOT_FOUND';
-/******/ 			throw e;
-/******/ 		}
 /******/ 		// Create a new module (and put it into the cache)
 /******/ 		var module = __webpack_module_cache__[moduleId] = {
 /******/ 			// no module.id needed
@@ -74,6 +78,12 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
 /******/ 		};
 /******/ 	
 /******/ 		// Execute the module function
+/******/ 		if (!(moduleId in __webpack_modules__)) {
+/******/ 			delete __webpack_module_cache__[moduleId];
+/******/ 			var e = new Error("Cannot find module '" + moduleId + "'");
+/******/ 			e.code = 'MODULE_NOT_FOUND';
+/******/ 			throw e;
+/******/ 		}
 /******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
 /******/ 	
 /******/ 		// Return the exports of the module
@@ -84,6 +94,36 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
 /******/ 	__webpack_require__.m = __webpack_modules__;
 /******/ 	
 /************************************************************************/
+/******/ 	/* webpack/runtime/create fake namespace object */
+/******/ 	(() => {
+/******/ 		var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);
+/******/ 		var leafPrototypes;
+/******/ 		// create a fake namespace object
+/******/ 		// mode & 1: value is a module id, require it
+/******/ 		// mode & 2: merge all properties of value into the ns
+/******/ 		// mode & 4: return value when already ns object
+/******/ 		// mode & 16: return value when it's Promise-like
+/******/ 		// mode & 8|1: behave like require
+/******/ 		__webpack_require__.t = function(value, mode) {
+/******/ 			if(mode & 1) value = this(value);
+/******/ 			if(mode & 8) return value;
+/******/ 			if(typeof value === 'object' && value) {
+/******/ 				if((mode & 4) && value.__esModule) return value;
+/******/ 				if((mode & 16) && typeof value.then === 'function') return value;
+/******/ 			}
+/******/ 			var ns = Object.create(null);
+/******/ 			__webpack_require__.r(ns);
+/******/ 			var def = {};
+/******/ 			leafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];
+/******/ 			for(var current = mode & 2 && value; (typeof current == 'object' || typeof current == 'function') && !~leafPrototypes.indexOf(current); current = getProto(current)) {
+/******/ 				Object.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key])));
+/******/ 			}
+/******/ 			def['default'] = () => (value);
+/******/ 			__webpack_require__.d(ns, def);
+/******/ 			return ns;
+/******/ 		};
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/define property getters */
 /******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
@@ -118,6 +158,18 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
 /******/ 		};
 /******/ 	})();
 /******/ 	
+/******/ 	/* webpack/runtime/global */
+/******/ 	(() => {
+/******/ 		__webpack_require__.g = (function() {
+/******/ 			if (typeof globalThis === 'object') return globalThis;
+/******/ 			try {
+/******/ 				return this || new Function('return this')();
+/******/ 			} catch (e) {
+/******/ 				if (typeof window === 'object') return window;
+/******/ 			}
+/******/ 		})();
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 /******/ 	(() => {
 /******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
@@ -182,8 +234,8 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
 /******/ 	/* webpack/runtime/publicPath */
 /******/ 	(() => {
 /******/ 		var scriptUrl;
-/******/ 		if (globalThis.importScripts) scriptUrl = globalThis.location + "";
-/******/ 		var document = globalThis.document;
+/******/ 		if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
+/******/ 		var document = __webpack_require__.g.document;
 /******/ 		if (!scriptUrl && document) {
 /******/ 			if (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT')
 /******/ 				scriptUrl = document.currentScript.src;

package/tsparticles.path.svg.min.js

@@ -1,2 +1,2 @@
-/*! For license information please see tsparticles.path.svg.min.js.LICENSE.txt */
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var r="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(this,(e=>(()=>{var t,r,o={303(t){t.exports=e}},a={};function n(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={exports:{}};return o[e](r,r.exports,n),r.exports}n.m=o,n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((t,r)=>(n.f[r](e,t),t)),[])),n.u=e=>e+".min.js",n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),t={},r="@tsparticles/path-svg:",n.l=(e,o,a,i)=>{if(t[e])t[e].push(o);else{var s,l;if(void 0!==a)for(var p=document.getElementsByTagName("script"),c=0;c<p.length;c++){var u=p[c];if(u.getAttribute("src")==e||u.getAttribute("data-webpack")==r+a){s=u;break}}s||(l=!0,(s=document.createElement("script")).charset="utf-8",n.nc&&s.setAttribute("nonce",n.nc),s.setAttribute("data-webpack",r+a),s.src=e),t[e]=[o];var d=(r,o)=>{s.onerror=s.onload=null,clearTimeout(f);var a=t[e];if(delete t[e],s.parentNode&&s.parentNode.removeChild(s),a&&a.forEach((e=>e(o))),r)return r(o)},f=setTimeout(d.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=d.bind(null,s.onerror),s.onload=d.bind(null,s.onload),l&&document.head.appendChild(s)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;globalThis.importScripts&&(e=globalThis.location+"");var t=globalThis.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var o=r.length-1;o>-1&&(!e||!/^http(s?):/.test(e));)e=r[o--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})(),(()=>{var e={258:0};n.f.j=(t,r)=>{var o=n.o(e,t)?e[t]:void 0;if(0!==o)if(o)r.push(o[2]);else{var a=new Promise(((r,a)=>o=e[t]=[r,a]));r.push(o[2]=a);var i=n.p+n.u(t),s=new Error;n.l(i,(r=>{if(n.o(e,t)&&(0!==(o=e[t])&&(e[t]=void 0),o)){var a=r&&("load"===r.type?"missing":r.type),i=r&&r.target&&r.target.src;s.message="Loading chunk "+t+" failed.\n("+a+": "+i+")",s.name="ChunkLoadError",s.type=a,s.request=i,o[1](s)}}),"chunk-"+t,t)}};var t=(t,r)=>{var o,a,[i,s,l]=r,p=0;if(i.some((t=>0!==e[t]))){for(o in s)n.o(s,o)&&(n.m[o]=s[o]);if(l)l(n)}for(t&&t(r);p<i.length;p++)a=i[p],n.o(e,a)&&e[a]&&e[a][0](),e[a]=0},r=this.webpackChunk_tsparticles_path_svg=this.webpackChunk_tsparticles_path_svg||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var i={};n.r(i),n.d(i,{loadSVGPath:()=>l,svgPathName:()=>s});const s="svgPathGenerator";async function l(e){e.checkVersion("4.0.0-alpha.8"),await e.register((async e=>{const{SVGPathGenerator:t}=await n.e(376).then(n.bind(n,376));e.addPathGenerator(s,new t)}))}return i})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/plugin-move"),require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/plugin-move","@tsparticles/engine"],t);else{var r="object"==typeof exports?t(require("@tsparticles/plugin-move"),require("@tsparticles/engine")):t(e.window,e.window);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(this,(e,t)=>(()=>{"use strict";var r,o,n,i={303(e){e.exports=t},400(t){t.exports=e}},a={};function s(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={exports:{}};return i[e](r,r.exports,s),r.exports}s.m=i,p=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,s.t=function(e,t){if(1&t&&(e=this(e)),8&t||"object"==typeof e&&e&&(4&t&&e.__esModule||16&t&&"function"==typeof e.then))return e;var r=Object.create(null);s.r(r);var o={};c=c||[null,p({}),p([]),p(p)];for(var n=2&t&&e;("object"==typeof n||"function"==typeof n)&&!~c.indexOf(n);n=p(n))Object.getOwnPropertyNames(n).forEach(t=>o[t]=()=>e[t]);return o.default=()=>e,s.d(r,o),r},s.d=(e,t)=>{for(var r in t)s.o(t,r)&&!s.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},s.f={},s.e=e=>Promise.all(Object.keys(s.f).reduce((t,r)=>(s.f[r](e,t),t),[])),s.u=e=>""+e+".min.js",s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),l={},s.l=(e,t,r,o)=>{if(l[e])return void l[e].push(t);if(void 0!==r)for(var n,i,a=document.getElementsByTagName("script"),c=0;c<a.length;c++){var p=a[c];if(p.getAttribute("src")==e||p.getAttribute("data-webpack")=="@tsparticles/path-svg:"+r){n=p;break}}n||(i=!0,(n=document.createElement("script")).charset="utf-8",s.nc&&n.setAttribute("nonce",s.nc),n.setAttribute("data-webpack","@tsparticles/path-svg:"+r),n.src=e),l[e]=[t];var u=(t,r)=>{n.onerror=n.onload=null,clearTimeout(f);var o=l[e];if(delete l[e],n.parentNode&&n.parentNode.removeChild(n),o&&o.forEach(e=>e(r)),t)return t(r)},f=setTimeout(u.bind(null,void 0,{type:"timeout",target:n}),12e4);n.onerror=u.bind(null,n.onerror),n.onload=u.bind(null,n.onload),i&&document.head.appendChild(n)},s.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.g.importScripts&&(u=s.g.location+"");var c,p,l,u,f=s.g.document;if(!u&&f&&(f.currentScript&&"SCRIPT"===f.currentScript.tagName.toUpperCase()&&(u=f.currentScript.src),!u)){var d=f.getElementsByTagName("script");if(d.length)for(var h=d.length-1;h>-1&&(!u||!/^http(s?):/.test(u));)u=d[h--].src}if(!u)throw Error("Automatic publicPath is not supported in this browser");s.p=u=u.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),r={258:0},s.f.j=(e,t)=>{var o=s.o(r,e)?r[e]:void 0;if(0!==o)if(o)t.push(o[2]);else{var n=new Promise((t,n)=>o=r[e]=[t,n]);t.push(o[2]=n);var i=s.p+s.u(e),a=Error();s.l(i,t=>{if(s.o(r,e)&&(0!==(o=r[e])&&(r[e]=void 0),o)){var n=t&&("load"===t.type?"missing":t.type),i=t&&t.target&&t.target.src;a.message="Loading chunk "+e+` failed.
+(`+n+": "+i+")",a.name="ChunkLoadError",a.type=n,a.request=i,o[1](a)}},"chunk-"+e,e)}},o=(e,t)=>{var o,n,[i,a,c]=t,p=0;if(i.some(e=>0!==r[e])){for(o in a)s.o(a,o)&&(s.m[o]=a[o]);c&&c(s)}for(e&&e(t);p<i.length;p++)n=i[p],s.o(r,n)&&r[n]&&r[n][0](),r[n]=0},(n=this.webpackChunk_tsparticles_path_svg=this.webpackChunk_tsparticles_path_svg||[]).forEach(o.bind(null,0)),n.push=o.bind(null,n.push.bind(n));var b={};s.r(b),s.d(b,{loadSVGPath:()=>v,svgPathName:()=>g});let g="svgPathGenerator";async function v(e){e.checkVersion("4.0.0-beta.0"),await e.register(async e=>{let{ensureBaseMoverLoaded:t}=await Promise.resolve().then(s.t.bind(s,400,19));t(e),e.addPathGenerator?.(g,async e=>{let{SVGPathGenerator:t}=await s.e(266).then(s.bind(s,266));return new t(e)})})}return b})());

package/types/SVGPathGenerator.d.ts

@@ -1,4 +1,5 @@
-import { type Container, type ICoordinates, type IDelta, type IDimension, type IMovePathGenerator, type Particle, Vector } from "@tsparticles/engine";
+import { type Container, type ICoordinates, type IDelta, type IDimension, type Particle, Vector } from "@tsparticles/engine";
+import { type IMovePathGenerator } from "@tsparticles/plugin-move";
 declare enum SVGPathDirection {
     normal = 0,
     reverse = 1
@@ -12,15 +13,17 @@ type SVGPathParticle = Particle & {
     svgStep?: number;
 };
 export declare class SVGPathGenerator implements IMovePathGenerator {
+    private readonly _container;
     private readonly _offset;
     private _paths;
+    private readonly _res;
     private _reverse;
     private _scale;
     private readonly _size;
     private _width;
-    constructor();
+    constructor(container: Container);
     generate(particle: SVGPathParticle, delta: IDelta): Vector;
-    init(container: Container): void;
+    init(): void;
     reset(): void;
     update(): void;
 }

package/types/createSVGPaths.d.ts

@@ -0,0 +1,2 @@
+import type { SVGPathData } from "./types.js";
+export declare function createSVGPaths(data: string[]): SVGPathData[];

package/types/loadSVGFromString.d.ts

@@ -0,0 +1,9 @@
+import type { SVGPathData } from "./types.js";
+export interface LoadedSVGPaths {
+    paths: SVGPathData[];
+    size: {
+        height: number;
+        width: number;
+    };
+}
+export declare function loadSVGFromString(svgText: string): LoadedSVGPaths;

package/types/types.d.ts

@@ -0,0 +1,4 @@
+export interface SVGPathData {
+    element: SVGPathElement;
+    length: number;
+}

package/umd/SVGPathGenerator.js

@@ -4,13 +4,15 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/engine"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./createSVGPaths.js", "./loadSVGFromString.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.SVGPathGenerator = void 0;
     const engine_1 = require("@tsparticles/engine");
+    const createSVGPaths_js_1 = require("./createSVGPaths.js");
+    const loadSVGFromString_js_1 = require("./loadSVGFromString.js");
     var SVGPathDirection;
     (function (SVGPathDirection) {
         SVGPathDirection[SVGPathDirection["normal"] = 0] = "normal";
@@ -18,16 +20,26 @@
     })(SVGPathDirection || (SVGPathDirection = {}));
     const defaultSpeed = 1, minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
     class SVGPathGenerator {
-        constructor() {
+        _container;
+        _offset;
+        _paths;
+        _res;
+        _reverse;
+        _scale;
+        _size;
+        _width;
+        constructor(container) {
+            this._container = container;
             this._paths = [];
             this._reverse = false;
             this._size = { width: 0, height: 0 };
             this._scale = 1;
             this._offset = { x: 0, y: 0, mode: engine_1.PixelMode.percent };
             this._width = 0;
+            this._res = engine_1.Vector.origin;
         }
         generate(particle, delta) {
-            const container = particle.container, pxRatio = container.retina.pixelRatio;
+            const container = this._container, pxRatio = container.retina.pixelRatio;
             particle.svgDirection ??= (0, engine_1.getRandom)() > engine_1.half ? SVGPathDirection.normal : SVGPathDirection.reverse;
             particle.svgPathIndex ??= Math.floor((0, engine_1.getRandom)() * this._paths.length);
             particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * engine_1.half).length;
@@ -75,15 +87,17 @@
                 }
             }
             path = this._paths[particle.svgPathIndex];
-            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;
+            const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this._container.canvas.size, offset = (0, engine_1.getPosition)(this._offset, canvasSize), scale = this._scale * pxRatio;
             particle.position.x =
                 (pos.x - this._size.width * engine_1.half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;
             particle.position.y =
                 (pos.y - this._size.height * engine_1.half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;
-            return engine_1.Vector.origin;
+            this._res.x = 0;
+            this._res.y = 0;
+            return this._res;
         }
-        init(container) {
-            const options = container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
+        init() {
+            const options = this._container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
             this._reverse = options.reverse ?? this._reverse;
             this._scale = options.scale ?? minScale;
             this._offset.x = position.x;
@@ -93,37 +107,15 @@
             if (options.url && !options.path) {
                 const url = options.url;
                 void (async () => {
-                    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 = Number.parseFloat(svg.getAttribute("height") ?? "0");
-                    this._size.width = Number.parseFloat(svg.getAttribute("width") ?? "0");
+                    const response = await fetch(url), data = await response.text(), { paths, size } = (0, loadSVGFromString_js_1.loadSVGFromString)(data);
+                    this._paths = paths;
+                    this._size.width = size.width;
+                    this._size.height = size.height;
                 })();
             }
             else if (options.path) {
                 const path = options.path;
-                this._paths = [];
-                for (const item of path.data) {
-                    const element = (0, engine_1.safeDocument)().createElementNS("http://www.w3.org/2000/svg", "path");
-                    element.setAttribute("d", item);
-                    this._paths.push({
-                        element,
-                        length: element.getTotalLength(),
-                    });
-                }
+                this._paths = (0, createSVGPaths_js_1.createSVGPaths)(options.path.data);
                 this._size.height = path.size.height;
                 this._size.width = path.size.width;
             }

package/umd/createSVGPaths.js

@@ -0,0 +1,25 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/engine"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.createSVGPaths = createSVGPaths;
+    const engine_1 = require("@tsparticles/engine");
+    function createSVGPaths(data) {
+        const doc = (0, engine_1.safeDocument)();
+        return data.map(d => {
+            const element = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+            element.setAttribute("d", d);
+            return {
+                element,
+                length: element.getTotalLength(),
+            };
+        });
+    }
+});

package/umd/index.js

@@ -47,10 +47,14 @@ var __importStar = (this && this.__importStar) || (function () {
     exports.loadSVGPath = loadSVGPath;
     exports.svgPathName = "svgPathGenerator";
     async function loadSVGPath(engine) {
-        engine.checkVersion("4.0.0-alpha.8");
+        engine.checkVersion("4.0.0-beta.0");
         await engine.register(async (e) => {
-            const { SVGPathGenerator } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./SVGPathGenerator.js"))) : new Promise((resolve_1, reject_1) => { require(["./SVGPathGenerator.js"], resolve_1, reject_1); }).then(__importStar));
-            e.addPathGenerator(exports.svgPathName, new SVGPathGenerator());
+            const { ensureBaseMoverLoaded } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/plugin-move"))) : new Promise((resolve_1, reject_1) => { require(["@tsparticles/plugin-move"], resolve_1, reject_1); }).then(__importStar));
+            ensureBaseMoverLoaded(e);
+            e.addPathGenerator?.(exports.svgPathName, async (container) => {
+                const { SVGPathGenerator } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./SVGPathGenerator.js"))) : new Promise((resolve_2, reject_2) => { require(["./SVGPathGenerator.js"], resolve_2, reject_2); }).then(__importStar));
+                return new SVGPathGenerator(container);
+            });
         });
     }
 });

package/umd/loadSVGFromString.js

@@ -0,0 +1,37 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.loadSVGFromString = loadSVGFromString;
+    function loadSVGFromString(svgText) {
+        const parser = new DOMParser(), doc = parser.parseFromString(svgText, "image/svg+xml"), svg = doc.querySelector("svg");
+        if (!svg) {
+            return { paths: [], size: { width: 0, height: 0 } };
+        }
+        const pathElements = svg.querySelectorAll("path"), paths = [];
+        for (const node of pathElements) {
+            if (!(node instanceof SVGPathElement)) {
+                continue;
+            }
+            paths.push({
+                element: node,
+                length: node.getTotalLength(),
+            });
+        }
+        const size = {
+            width: Number.parseFloat(svg.getAttribute("width") ?? "0"),
+            height: Number.parseFloat(svg.getAttribute("height") ?? "0"),
+        };
+        return {
+            paths,
+            size,
+        };
+    }
+});

package/umd/types.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/376.min.js

@@ -1,2 +0,0 @@
-/*! For license information please see 376.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_path_svg=this.webpackChunk_tsparticles_path_svg||[]).push([[376],{376(t,e,s){s.d(e,{SVGPathGenerator:()=>a});var h,i=s(303);!function(t){t[t.normal=0]="normal",t[t.reverse=1]="reverse"}(h||(h={}));class a{constructor(){this._paths=[],this._reverse=!1,this._size={width:0,height:0},this._scale=1,this._offset={x:0,y:0,mode:i.PixelMode.percent},this._width=0}generate(t,e){const s=t.container.retina.pixelRatio;t.svgDirection??=(0,i.getRandom)()>i.half?h.normal:h.reverse,t.svgPathIndex??=Math.floor((0,i.getRandom)()*this._paths.length),t.svgSpeed??=t.velocity.mult((t.retina.moveSpeed??1)*i.half).length,t.svgStep??=(0,i.randomInRangeValue)({min:0,max:this._paths[t.svgPathIndex].length})*s,t.svgOffset??={width:(0,i.randomInRangeValue)({min:-this._width*i.half,max:this._width*i.half})*s,height:(0,i.randomInRangeValue)({min:-this._width*i.half,max:this._width*i.half})*s},t.svgInitialPosition??=t.position.copy(),t.velocity.x=0,t.velocity.y=0,t.svgDirection===h.normal?t.svgStep+=t.svgSpeed*e.factor:t.svgStep-=t.svgSpeed*e.factor;let a=this._paths[t.svgPathIndex];const n=a.length;t.svgStep>=n?(t.svgPathIndex=t.svgPathIndex+1,t.svgPathIndex>=this._paths.length&&(this._reverse?(t.svgPathIndex=this._paths.length-1,t.svgDirection=h.reverse):(t.svgPathIndex=0,t.svgStep=0))):t.svgStep<=0&&(t.svgPathIndex=t.svgPathIndex-1,t.svgPathIndex<0&&(this._reverse?(t.svgPathIndex=0,t.svgDirection=h.normal):(t.svgPathIndex=this._paths.length-1,a=this._paths[t.svgPathIndex],t.svgStep=a.length))),a=this._paths[t.svgPathIndex];const g=a.element.getPointAtLength(t.svgStep),o=t.container.canvas.size,r=(0,i.getPosition)(this._offset,o),l=this._scale*s;return t.position.x=(g.x-this._size.width*i.half)*l+t.svgInitialPosition.x+r.x+t.svgOffset.width,t.position.y=(g.y-this._size.height*i.half)*l+t.svgInitialPosition.y+r.y+t.svgOffset.height,i.Vector.origin}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;(async()=>{const e=await fetch(t),s=await e.text(),h=(new DOMParser).parseFromString(s,"image/svg+xml"),i=h.getElementsByTagName("svg")[0];let a=i.getElementsByTagName("path");a.length||(a=h.getElementsByTagName("path")),this._paths=[];for(let t=0;t<a.length;t++){const e=a.item(t);e&&this._paths.push({element:e,length:e.getTotalLength()})}this._size.height=Number.parseFloat(i.getAttribute("height")??"0"),this._size.width=Number.parseFloat(i.getAttribute("width")??"0")})()}else if(e.path){const t=e.path;this._paths=[];for(const e of t.data){const t=(0,i.safeDocument)().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/376.min.js.LICENSE.txt

@@ -1 +0,0 @@
-/*! tsParticles SVG Path v4.0.0-alpha.8 by Matteo Bruni */

package/tsparticles.path.svg.min.js.LICENSE.txt

@@ -1 +0,0 @@
-/*! tsParticles SVG Path v4.0.0-alpha.8 by Matteo Bruni */