@tsparticles/path-svg 3.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Matteo Bruni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,74 @@
+[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
+
+# tsParticles SVG Path
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/path-svg/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/path-svg)
+[![npmjs](https://badge.fury.io/js/@tsparticles/path-svg.svg)](https://www.npmjs.com/package/@tsparticles/path-svg)
+[![npmjs](https://img.shields.io/npm/dt/@tsparticles/path-svg)](https://www.npmjs.com/package/@tsparticles/path-svg) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+[tsParticles](https://github.com/matteobruni/tsparticles) path plugin for on svg path movement.
+
+## How to use it
+
+### CDN / Vanilla JS / jQuery
+
+The CDN/Vanilla version JS has one required file in vanilla configuration:
+
+Including the `tsparticles.path.svg.min.js` file will export the function to load the path plugin:
+
+```text
+loadSVGPath
+```
+
+### Usage
+
+Once the scripts are loaded you can set up `tsParticles` and the path plugin like this:
+
+```javascript
+(async () => {
+  await loadSVGPath(tsParticles);
+
+  await tsParticles.load({
+    id: "tsparticles",
+    options: {
+      /* options */
+    },
+  });
+})();
+```
+
+### ESM / CommonJS
+
+This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
+
+```shell
+$ npm install @tsparticles/path-svg
+```
+
+or
+
+```shell
+$ yarn add @tsparticles/path-svg
+```
+
+Then you need to import it in the app, like this:
+
+```javascript
+const { tsParticles } = require("@tsparticles/engine");
+const { loadSVGPath } = require("@tsparticles/path-svg");
+
+(async () => {
+  await loadSVGPath(tsParticles);
+})();
+```
+
+or
+
+```javascript
+import { tsParticles } from "@tsparticles/engine";
+import { loadSVGPath } from "@tsparticles/path-svg";
+
+(async () => {
+  await loadSVGPath(tsParticles);
+})();
+```

package/browser/SVGPathGenerator.js

@@ -0,0 +1,139 @@
+import { Vector, getPosition, getRandom, randomInRange, } from "@tsparticles/engine";
+export class SVGPathGenerator {
+    constructor() {
+        this._paths = [];
+        this._reverse = false;
+        this._size = { width: 0, height: 0 };
+        this._scale = 1;
+        this._offset = { x: 0, y: 0, mode: "percent" };
+        this._width = 0;
+    }
+    generate(particle, delta) {
+        const container = particle.container, pxRatio = container.retina.pixelRatio;
+        if (particle.svgDirection === undefined) {
+            particle.svgDirection = getRandom() > 0.5 ? 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;
+        }
+        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,
+            };
+        }
+        if (particle.svgInitialPosition === undefined) {
+            particle.svgInitialPosition = { ...particle.position };
+        }
+        particle.velocity.x = 0;
+        particle.velocity.y = 0;
+        if (particle.svgDirection === 0) {
+            particle.svgStep += particle.svgSpeed * delta.factor;
+        }
+        else {
+            particle.svgStep -= particle.svgSpeed * delta.factor;
+        }
+        let path = this._paths[particle.svgPathIndex];
+        if (path) {
+            const pathLength = path.length;
+            if (particle.svgStep >= pathLength) {
+                particle.svgPathIndex = particle.svgPathIndex + 1;
+                if (particle.svgPathIndex >= this._paths.length) {
+                    if (this._reverse) {
+                        particle.svgPathIndex = this._paths.length - 1;
+                        particle.svgDirection = 1;
+                    }
+                    else {
+                        particle.svgPathIndex = 0;
+                        particle.svgStep = 0;
+                    }
+                }
+            }
+            else if (particle.svgStep <= 0) {
+                particle.svgPathIndex = particle.svgPathIndex - 1;
+                if (particle.svgPathIndex < 0) {
+                    if (this._reverse) {
+                        particle.svgPathIndex = 0;
+                        particle.svgDirection = 0;
+                    }
+                    else {
+                        particle.svgPathIndex = this._paths.length - 1;
+                        path = this._paths[particle.svgPathIndex];
+                        particle.svgStep = path.length;
+                    }
+                }
+            }
+            path = this._paths[particle.svgPathIndex];
+        }
+        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 +
+                    particle.svgInitialPosition.x +
+                    offset.x +
+                    particle.svgOffset.width;
+            particle.position.y =
+                (pos.y - this._size.height / 2) * scale +
+                    particle.svgInitialPosition.y +
+                    offset.y +
+                    particle.svgOffset.height;
+        }
+        return Vector.origin;
+    }
+    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._offset.x = position.x;
+        this._offset.y = position.y;
+        this._offset.mode = position.mode;
+        this._width = options.width ?? 0;
+        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(),
+                        });
+                    }
+                }
+                this._size.height = parseFloat(svg.getAttribute("height") ?? "0");
+                this._size.width = parseFloat(svg.getAttribute("width") ?? "0");
+            })();
+        }
+        else if (options.path) {
+            const path = options.path;
+            this._paths = [];
+            for (const item of path.data) {
+                const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                element.setAttribute("d", item);
+                this._paths.push({
+                    element,
+                    length: element.getTotalLength(),
+                });
+            }
+            this._size.height = path.size.height;
+            this._size.width = path.size.width;
+        }
+    }
+    reset() {
+    }
+    update() {
+    }
+}

package/browser/index.js

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

package/cjs/SVGPathGenerator.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SVGPathGenerator = void 0;
+const engine_1 = require("@tsparticles/engine");
+class SVGPathGenerator {
+    constructor() {
+        this._paths = [];
+        this._reverse = false;
+        this._size = { width: 0, height: 0 };
+        this._scale = 1;
+        this._offset = { x: 0, y: 0, mode: "percent" };
+        this._width = 0;
+    }
+    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;
+        }
+        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;
+        }
+        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,
+            };
+        }
+        if (particle.svgInitialPosition === undefined) {
+            particle.svgInitialPosition = { ...particle.position };
+        }
+        particle.velocity.x = 0;
+        particle.velocity.y = 0;
+        if (particle.svgDirection === 0) {
+            particle.svgStep += particle.svgSpeed * delta.factor;
+        }
+        else {
+            particle.svgStep -= particle.svgSpeed * delta.factor;
+        }
+        let path = this._paths[particle.svgPathIndex];
+        if (path) {
+            const pathLength = path.length;
+            if (particle.svgStep >= pathLength) {
+                particle.svgPathIndex = particle.svgPathIndex + 1;
+                if (particle.svgPathIndex >= this._paths.length) {
+                    if (this._reverse) {
+                        particle.svgPathIndex = this._paths.length - 1;
+                        particle.svgDirection = 1;
+                    }
+                    else {
+                        particle.svgPathIndex = 0;
+                        particle.svgStep = 0;
+                    }
+                }
+            }
+            else if (particle.svgStep <= 0) {
+                particle.svgPathIndex = particle.svgPathIndex - 1;
+                if (particle.svgPathIndex < 0) {
+                    if (this._reverse) {
+                        particle.svgPathIndex = 0;
+                        particle.svgDirection = 0;
+                    }
+                    else {
+                        particle.svgPathIndex = this._paths.length - 1;
+                        path = this._paths[particle.svgPathIndex];
+                        particle.svgStep = path.length;
+                    }
+                }
+            }
+            path = this._paths[particle.svgPathIndex];
+        }
+        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 +
+                    particle.svgInitialPosition.x +
+                    offset.x +
+                    particle.svgOffset.width;
+            particle.position.y =
+                (pos.y - this._size.height / 2) * scale +
+                    particle.svgInitialPosition.y +
+                    offset.y +
+                    particle.svgOffset.height;
+        }
+        return engine_1.Vector.origin;
+    }
+    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._offset.x = position.x;
+        this._offset.y = position.y;
+        this._offset.mode = position.mode;
+        this._width = options.width ?? 0;
+        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(),
+                        });
+                    }
+                }
+                this._size.height = parseFloat(svg.getAttribute("height") ?? "0");
+                this._size.width = parseFloat(svg.getAttribute("width") ?? "0");
+            })();
+        }
+        else if (options.path) {
+            const path = options.path;
+            this._paths = [];
+            for (const item of path.data) {
+                const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                element.setAttribute("d", item);
+                this._paths.push({
+                    element,
+                    length: element.getTotalLength(),
+                });
+            }
+            this._size.height = path.size.height;
+            this._size.width = path.size.width;
+        }
+    }
+    reset() {
+    }
+    update() {
+    }
+}
+exports.SVGPathGenerator = SVGPathGenerator;

package/cjs/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadSVGPath = exports.svgPathName = void 0;
+const SVGPathGenerator_1 = require("./SVGPathGenerator");
+exports.svgPathName = "svgPathGenerator";
+async function loadSVGPath(engine, refresh = true) {
+    await engine.addPathGenerator(exports.svgPathName, new SVGPathGenerator_1.SVGPathGenerator(), refresh);
+}
+exports.loadSVGPath = loadSVGPath;

package/esm/SVGPathGenerator.js

@@ -0,0 +1,139 @@
+import { Vector, getPosition, getRandom, randomInRange, } from "@tsparticles/engine";
+export class SVGPathGenerator {
+    constructor() {
+        this._paths = [];
+        this._reverse = false;
+        this._size = { width: 0, height: 0 };
+        this._scale = 1;
+        this._offset = { x: 0, y: 0, mode: "percent" };
+        this._width = 0;
+    }
+    generate(particle, delta) {
+        const container = particle.container, pxRatio = container.retina.pixelRatio;
+        if (particle.svgDirection === undefined) {
+            particle.svgDirection = getRandom() > 0.5 ? 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;
+        }
+        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,
+            };
+        }
+        if (particle.svgInitialPosition === undefined) {
+            particle.svgInitialPosition = { ...particle.position };
+        }
+        particle.velocity.x = 0;
+        particle.velocity.y = 0;
+        if (particle.svgDirection === 0) {
+            particle.svgStep += particle.svgSpeed * delta.factor;
+        }
+        else {
+            particle.svgStep -= particle.svgSpeed * delta.factor;
+        }
+        let path = this._paths[particle.svgPathIndex];
+        if (path) {
+            const pathLength = path.length;
+            if (particle.svgStep >= pathLength) {
+                particle.svgPathIndex = particle.svgPathIndex + 1;
+                if (particle.svgPathIndex >= this._paths.length) {
+                    if (this._reverse) {
+                        particle.svgPathIndex = this._paths.length - 1;
+                        particle.svgDirection = 1;
+                    }
+                    else {
+                        particle.svgPathIndex = 0;
+                        particle.svgStep = 0;
+                    }
+                }
+            }
+            else if (particle.svgStep <= 0) {
+                particle.svgPathIndex = particle.svgPathIndex - 1;
+                if (particle.svgPathIndex < 0) {
+                    if (this._reverse) {
+                        particle.svgPathIndex = 0;
+                        particle.svgDirection = 0;
+                    }
+                    else {
+                        particle.svgPathIndex = this._paths.length - 1;
+                        path = this._paths[particle.svgPathIndex];
+                        particle.svgStep = path.length;
+                    }
+                }
+            }
+            path = this._paths[particle.svgPathIndex];
+        }
+        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 +
+                    particle.svgInitialPosition.x +
+                    offset.x +
+                    particle.svgOffset.width;
+            particle.position.y =
+                (pos.y - this._size.height / 2) * scale +
+                    particle.svgInitialPosition.y +
+                    offset.y +
+                    particle.svgOffset.height;
+        }
+        return Vector.origin;
+    }
+    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._offset.x = position.x;
+        this._offset.y = position.y;
+        this._offset.mode = position.mode;
+        this._width = options.width ?? 0;
+        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(),
+                        });
+                    }
+                }
+                this._size.height = parseFloat(svg.getAttribute("height") ?? "0");
+                this._size.width = parseFloat(svg.getAttribute("width") ?? "0");
+            })();
+        }
+        else if (options.path) {
+            const path = options.path;
+            this._paths = [];
+            for (const item of path.data) {
+                const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                element.setAttribute("d", item);
+                this._paths.push({
+                    element,
+                    length: element.getTotalLength(),
+                });
+            }
+            this._size.height = path.size.height;
+            this._size.width = path.size.width;
+        }
+    }
+    reset() {
+    }
+    update() {
+    }
+}

package/esm/index.js

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

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@tsparticles/path-svg",
+  "version": "3.0.0-beta.0",
+  "description": "tsParticles svg path",
+  "homepage": "https://particles.js.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/matteobruni/tsparticles.git",
+    "directory": "paths/svg"
+  },
+  "keywords": [
+    "front-end",
+    "frontend",
+    "tsparticles",
+    "particles.js",
+    "particlesjs",
+    "particles",
+    "particle",
+    "canvas",
+    "jsparticles",
+    "xparticles",
+    "particles-js",
+    "particles-bg",
+    "particles-bg-vue",
+    "particles-ts",
+    "particles.ts",
+    "react-particles-js",
+    "react-particles.js",
+    "react-particles",
+    "react",
+    "reactjs",
+    "vue-particles",
+    "ngx-particles",
+    "angular-particles",
+    "particleground",
+    "vue",
+    "vuejs",
+    "preact",
+    "preactjs",
+    "jquery",
+    "angularjs",
+    "angular",
+    "typescript",
+    "javascript",
+    "animation",
+    "web",
+    "html5",
+    "web-design",
+    "webdesign",
+    "css",
+    "html",
+    "css3",
+    "animated",
+    "background",
+    "confetti",
+    "canvas",
+    "fireworks",
+    "fireworks-js",
+    "confetti-js",
+    "confettijs",
+    "fireworksjs",
+    "canvas-confetti",
+    "@tsparticles/plugin",
+    "@tsparticles/path"
+  ],
+  "author": "Matteo Bruni <matteo.bruni@me.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/matteobruni/tsparticles/issues"
+  },
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/matteobruni"
+    },
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/tsparticles"
+    },
+    {
+      "type": "buymeacoffee",
+      "url": "https://www.buymeacoffee.com/matteobruni"
+    }
+  ],
+  "main": "cjs/index.js",
+  "jsdelivr": "tsparticles.path.svg.min.js",
+  "unpkg": "tsparticles.path.svg.min.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.0-beta.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}