@tsparticles/engine 4.0.0-alpha.22 → 4.0.0-alpha.24

package/esm/Core/Canvas.js

@@ -1,6 +1,6 @@
 import { clear, drawParticle, drawParticlePlugin, paintBase, paintImage } from "../Utils/CanvasUtils.js";
 import { cloneStyle, getFullScreenStyle, safeMatchMedia, safeMutationObserver } from "../Utils/Utils.js";
-import { defaultTransformValue, generatedAttribute, minimumSize, zIndexFactorOffset } from "./Utils/Constants.js";
+import { defaultTransformValue, defaultZoom, generatedAttribute, half, minimumSize, zIndexFactorOffset, } from "./Utils/Constants.js";
 import { getStyleFromHsl, getStyleFromRgb, rangeColorToHsl, rangeColorToRgb } from "../Utils/ColorUtils.js";
 const fColorIndex = 0, sColorIndex = 1;
 function setTransformValue(factor, newFactor, key) {
@@ -42,6 +42,7 @@ export class Canvas {
     container;
     element;
     size;
+    zoom = defaultZoom;
     _canvasClearPlugins;
     _canvasPaintPlugins;
     _canvasSettings;
@@ -66,6 +67,7 @@ export class Canvas {
     _reusablePluginColors = [undefined, undefined];
     _reusableTransform = {};
     _standardSize;
+    _zoomCenter;
     constructor(container, engine) {
         this.container = container;
         this._engine = engine;
@@ -220,6 +222,16 @@ export class Canvas {
             }
         });
     }
+    getZoomCenter() {
+        const pxRatio = this.container.retina.pixelRatio, { width, height } = this.size;
+        if (this._zoomCenter) {
+            return this._zoomCenter;
+        }
+        return {
+            x: (width * half) / pxRatio,
+            y: (height * half) / pxRatio,
+        };
+    }
     init() {
         this._safeMutationObserver(obs => {
             obs.disconnect();
@@ -419,6 +431,10 @@ export class Canvas {
         this._pointerEvents = type;
         this._repairStyle();
     }
+    setZoom(zoomLevel, center) {
+        this.zoom = zoomLevel;
+        this._zoomCenter = center;
+    }
     stop() {
         this._safeMutationObserver(obs => {
             obs.disconnect();

package/esm/Core/Container.js

@@ -122,15 +122,12 @@ export class Container {
             return;
         }
         let refreshTime = force;
-        const frame = (timestamp) => {
+        this._drawAnimationFrame = animate((timestamp) => {
             if (refreshTime) {
                 this._lastFrameTime = undefined;
                 refreshTime = false;
             }
             this._nextFrame(timestamp);
-        };
-        this._drawAnimationFrame = animate(timestamp => {
-            frame(timestamp);
         });
     }
     async export(type, options = {}) {

package/esm/Core/Engine.js

@@ -87,7 +87,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-alpha.22";
+        return "4.0.0-alpha.24";
     }
     addColorManager(name, manager) {
         this.colorManagers.set(name, manager);

package/esm/Core/Particle.js

@@ -1,4 +1,5 @@
 import { Vector, Vector3d } from "./Utils/Vectors.js";
+import { alterHsl, getHslFromAnimation } from "../Utils/ColorUtils.js";
 import { calcExactPositionOrRandomFromSize, clamp, degToRad, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, randomInRangeValue, setRangeValue, } from "../Utils/MathUtils.js";
 import { decayOffset, defaultAngle, defaultOpacity, defaultRetryCount, defaultTransform, double, doublePI, half, identity, millisecondsToSeconds, minZ, randomColorValue, squareExp, triple, tryCountIncrement, zIndexFactorOffset, } from "./Utils/Constants.js";
 import { deepExtend, getPosition, initParticleNumericAnimationValue, isInArray, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
@@ -6,8 +7,6 @@ import { EventType } from "../Enums/Types/EventType.js";
 import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
 import { OutMode } from "../Enums/Modes/OutMode.js";
 import { ParticleOutType } from "../Enums/Types/ParticleOutType.js";
-import { alterHsl } from "../Utils/CanvasUtils.js";
-import { getHslFromAnimation } from "../Utils/ColorUtils.js";
 import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
 function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
     const effectData = effectOptions.options[effect];

package/esm/Core/Utils/Constants.js

@@ -7,4 +7,4 @@ export const generatedAttribute = "generated", resizeEvent = "resize", visibilit
     b: 0,
     c: 0,
     d: 1,
-}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, qTreeCapacity = 4, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, subdivideCount = 4, inverseFactorNumerator = 1.0, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, minimumLength = 0, zIndexFactorOffset = 1, defaultOpacity = 1, clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minRetries = 0, minZ = 0, defaultRadius = 0, posOffset = -quarter, sizeFactor = 1.5, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, touchDelay = 500, manualDefaultPosition = 50, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0;
+}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, qTreeCapacity = 4, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, subdivideCount = 4, inverseFactorNumerator = 1, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, minimumLength = 0, zIndexFactorOffset = 1, defaultOpacity = 1, clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minRetries = 0, minZ = 0, defaultRadius = 0, posOffset = -quarter, sizeFactor = 1.5, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, touchDelay = 500, manualDefaultPosition = 50, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0, defaultZoom = 1;

package/esm/Core/Utils/QuadTree.js

@@ -1,51 +1,71 @@
 import { Circle, Rectangle } from "./Ranges.js";
-import { double, half, subdivideCount } from "./Constants.js";
+import { half, subdivideCount } from "./Constants.js";
 import { getDistance } from "../../Utils/MathUtils.js";
 export class QuadTree {
     rectangle;
     capacity;
-    _divided;
-    _points;
-    _subs;
+    _points = [];
+    _subs = null;
     constructor(rectangle, capacity) {
         this.rectangle = rectangle;
         this.capacity = capacity;
-        this._points = [];
-        this._divided = false;
-        this._subs = [];
     }
     insert(point) {
         if (!this.rectangle.contains(point.position)) {
             return false;
         }
-        if (this._points.length < this.capacity) {
-            this._points.push(point);
-            return true;
-        }
-        if (!this._divided) {
+        const subs = this._subs;
+        if (!subs) {
+            if (this._points.length < this.capacity) {
+                this._points.push(point);
+                return true;
+            }
             this._subdivide();
+            const newSubs = this._subs;
+            for (const p of this._points) {
+                for (let s = 0; s < subdivideCount; s++) {
+                    if (newSubs?.[s]?.insert(p)) {
+                        break;
+                    }
+                }
+            }
+            this._points.length = 0;
+            for (let s = 0; s < subdivideCount; s++) {
+                if (newSubs?.[s]?.insert(point)) {
+                    return true;
+                }
+            }
+            return false;
         }
-        return this._subs.some(sub => sub.insert(point));
+        for (let s = 0; s < subdivideCount; s++) {
+            if (subs[s]?.insert(point)) {
+                return true;
+            }
+        }
+        return false;
     }
-    query(range, check) {
-        const res = [];
+    query(range, check, out = []) {
         if (!range.intersects(this.rectangle)) {
-            return [];
+            return out;
         }
-        for (const p of this._points) {
-            if (!range.contains(p.position) &&
-                getDistance(range.position, p.position) > p.particle.getRadius() &&
-                (!check || check(p.particle))) {
+        const points = this._points;
+        for (const p of points) {
+            const particle = p.particle;
+            if (!range.contains(p.position) && getDistance(range.position, p.position) > particle.getRadius()) {
+                continue;
+            }
+            if (check && !check(particle)) {
                 continue;
             }
-            res.push(p.particle);
+            out.push(particle);
         }
-        if (this._divided) {
-            for (const sub of this._subs) {
-                res.push(...sub.query(range, check));
+        const subs = this._subs;
+        if (subs) {
+            for (const s of subs) {
+                s.query(range, check, out);
             }
         }
-        return res;
+        return out;
     }
     queryCircle(position, radius, check) {
         return this.query(new Circle(position.x, position.y, radius), check);
@@ -53,12 +73,13 @@ export class QuadTree {
     queryRectangle(position, size, check) {
         return this.query(new Rectangle(position.x, position.y, size.width, size.height), check);
     }
-    _subdivide = () => {
-        const { x, y } = this.rectangle.position, { width, height } = this.rectangle.size, { capacity } = this;
-        for (let i = 0; i < subdivideCount; i++) {
-            const fixedIndex = i % double;
-            this._subs.push(new QuadTree(new Rectangle(x + width * half * fixedIndex, y + height * half * (Math.round(i * half) - fixedIndex), width * half, height * half), capacity));
-        }
-        this._divided = true;
-    };
+    _subdivide() {
+        const rect = this.rectangle, { x, y } = rect.position, { width, height } = rect.size, halfWidth = width * half, halfHeight = height * half, capacity = this.capacity;
+        this._subs = [
+            new QuadTree(new Rectangle(x, y, halfWidth, halfHeight), capacity),
+            new QuadTree(new Rectangle(x + halfWidth, y, halfWidth, halfHeight), capacity),
+            new QuadTree(new Rectangle(x, y + halfHeight, halfWidth, halfHeight), capacity),
+            new QuadTree(new Rectangle(x + halfWidth, y + halfHeight, halfWidth, halfHeight), capacity),
+        ];
+    }
 }

package/esm/Core/Utils/Ranges.js

@@ -24,7 +24,7 @@ export class Circle extends BaseRange {
     intersects(range) {
         const pos1 = this.position, pos2 = range.position, distPos = { x: Math.abs(pos2.x - pos1.x), y: Math.abs(pos2.y - pos1.y) }, r = this.radius;
         if (range instanceof Circle || range.type === RangeType.circle) {
-            const circleRange = range, rSum = r + circleRange.radius, dist = Math.sqrt(distPos.x ** squareExp + distPos.y ** squareExp);
+            const circleRange = range, rSum = r + circleRange.radius, dist = Math.hypot(distPos.x, distPos.y);
             return rSum > dist;
         }
         else if (range instanceof Rectangle || range.type === RangeType.rectangle) {

package/esm/Utils/CanvasUtils.js

@@ -1,5 +1,4 @@
-import { lFactor, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
-import { AlterType } from "../Enums/Types/AlterType.js";
+import { defaultZoom, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
 export function paintBase(context, dimension, baseColor) {
     context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
     context.fillRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
@@ -16,7 +15,10 @@ export function clear(context, dimension) {
     context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
 export function drawParticle(data) {
-    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), transformData = particle.getTransformData(transform);
+    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = defaultZoom, drawPosition = {
+        x: pos.x,
+        y: pos.y,
+    };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
@@ -30,13 +32,20 @@ export function drawParticle(data) {
         context,
         particle,
         radius,
+        drawRadius: radius * drawScale,
         opacity,
         delta,
         pixelRatio: container.retina.pixelRatio,
         fill: particle.shapeFill,
         stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
         transformData,
+        position: { ...pos },
+        drawPosition,
+        drawScale,
     };
+    for (const plugin of container.plugins) {
+        plugin.drawParticleTransform?.(drawData);
+    }
     drawBeforeEffect(container, drawData);
     drawShapeBeforeDraw(container, drawData);
     drawShape(container, drawData);
@@ -115,10 +124,3 @@ export function drawParticlePlugin(context, plugin, particle, delta) {
     }
     plugin.drawParticle(context, particle, delta);
 }
-export function alterHsl(color, type, value) {
-    return {
-        h: color.h,
-        s: color.s,
-        l: color.l + (type === AlterType.darken ? -lFactor : lFactor) * value,
-    };
-}

package/esm/Utils/ColorUtils.js

@@ -1,6 +1,7 @@
 import { clamp, getRandom, getRandomInRange, getRangeMax, getRangeMin, getRangeValue, mix, randomInRangeValue, setRangeValue, } from "./MathUtils.js";
-import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, lMax, lMin, midColorValue, millisecondsToSeconds, percentDenominator, phaseNumerator, randomColorValue, rgbMax, sMax, sMin, sNormalizedOffset, sextuple, triple, } from "../Core/Utils/Constants.js";
+import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, lFactor, lMax, lMin, midColorValue, millisecondsToSeconds, percentDenominator, phaseNumerator, randomColorValue, rgbMax, sMax, sMin, sNormalizedOffset, sextuple, triple, } from "../Core/Utils/Constants.js";
 import { isArray, isString } from "./TypeUtils.js";
+import { AlterType } from "../Enums/Types/AlterType.js";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { itemFromArray } from "./Utils.js";
 const styleCache = new Map(), maxCacheSize = 1000, firstIndex = 0, rgbFixedPrecision = 2, hslFixedPrecision = 2;
@@ -350,3 +351,10 @@ export function updateColor(color, delta) {
     updateColorValue(s, ranges.s, true, delta);
     updateColorValue(l, ranges.l, true, delta);
 }
+export function alterHsl(color, type, value) {
+    return {
+        h: color.h,
+        s: color.s,
+        l: color.l + (type === AlterType.darken ? -lFactor : lFactor) * value,
+    };
+}

package/esm/Utils/MathUtils.js

@@ -21,10 +21,8 @@ export function getRandomInRange(min, max) {
     return getRandom() * (max - min) + min;
 }
 export function setAnimationFunctions(nextFrame, cancel) {
-    _animationLoop.nextFrame = (callback) => nextFrame(callback);
-    _animationLoop.cancel = (handle) => {
-        cancel(handle);
-    };
+    _animationLoop.nextFrame = nextFrame;
+    _animationLoop.cancel = cancel;
 }
 export function animate(fn) {
     return _animationLoop.nextFrame(fn);
@@ -68,8 +66,8 @@ export function setRangeValue(source, value) {
         : setRangeValue(min, max);
 }
 export function getDistances(pointA, pointB) {
-    const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y, squareExp = 2;
-    return { dx: dx, dy: dy, distance: Math.sqrt(dx ** squareExp + dy ** squareExp) };
+    const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
+    return { dx: dx, dy: dy, distance: Math.hypot(dx, dy) };
 }
 export function getDistance(pointA, pointB) {
     return getDistances(pointA, pointB).distance;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "4.0.0-alpha.22",
+  "version": "4.0.0-alpha.24",
   "description": "Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "scripts": {

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/engine [5 Feb 2026 at 19:32]</title>
+    <title>@tsparticles/engine [12 Feb 2026 at 18:48]</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>