I’m attempting to use tsParticles with no framework. Trying to use a Polygon Mask with animated particles.
The background loads, and the .svg file loads and there are no console errors. But there are no particles displayed. Do I need to initialize it some how, or are they being rendered off screen some how? Not sure what the issue is here.
Here is my code:
import {
tsParticles
} from "@tsparticles/engine";
import {
loadPolygonMaskPlugin
} from "@tsparticles/plugin-polygon-mask";
const log = console.log.bind(console);
loadPolygonMaskPlugin(tsParticles);
tsParticles
.load({
id: "tsparticles",
url: "./config.links.json",
})
.then((container) => {
log("callback - tsparticles config loaded");
})
.catch((error) => {
console.error(error);
});html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#tsparticles {
margin: 0 auto;
width: 250px;
height: 150px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tsParticles Polygon Mask</title>
<link rel="stylesheet" href="style.css">
<script type="module" src="main.js"></script>
</head>
<body>
<div id="tsparticles"></div>
</body>
</html>options.json file
{
"autoPlay": true,
"background": {
"color": {
"value": "#111"
},
"image": "",
"position": "center",
"repeat": "no-repeat",
"size": "contain",
"opacity": 1
},
"backgroundMask": {
"composite": "destination-out",
"cover": {
"color": {
"value": "#fff"
},
"opacity": 1
},
"enable": false
},
"clear": true,
"defaultThemes": {},
"delay": 0,
"detectRetina": true,
"duration": 0,
"fpsLimit": 120,
"fullScreen": {
"enable": false,
"zIndex": 100
},
"preset": ["links"],
"interactivity": {
"detectsOn": "window",
"events": {
"onClick": {
"enable": false,
"mode": "push"
},
"onDiv": {
"selectors": [],
"enable": false,
"mode": [],
"type": "circle"
},
"onHover": {
"enable": true,
"mode": "bubble",
"parallax": {
"enable": false,
"force": 2,
"smooth": 10
}
},
"resize": {
"delay": 0.5,
"enable": true
}
},
"modes": {
"trail": {
"delay": 1,
"pauseOnStop": false,
"quantity": 1
},
"attract": {
"distance": 200,
"duration": 0.4,
"easing": "ease-out-quad",
"factor": 1,
"maxSpeed": 50,
"speed": 1
},
"bounce": {
"distance": 200
},
"bubble": {
"distance": 40,
"duration": 2,
"mix": false,
"opacity": 8,
"size": 6,
"divs": {
"distance": 200,
"duration": 0.4,
"mix": false,
"selectors": []
}
},
"connect": {
"distance": 80,
"links": {
"opacity": 0.5
},
"radius": 60
},
"grab": {
"distance": 400,
"links": {
"blink": false,
"consent": false,
"opacity": 1
}
},
"push": {
"default": true,
"groups": [],
"quantity": 4
},
"remove": {
"quantity": 2
},
"repulse": {
"distance": 200,
"duration": 0.4,
"factor": 100,
"speed": 1,
"maxSpeed": 50,
"easing": "ease-out-quad",
"divs": {
"distance": 200,
"duration": 0.4,
"factor": 100,
"speed": 1,
"maxSpeed": 50,
"easing": "ease-out-quad",
"selectors": []
}
},
"slow": {
"factor": 1,
"radius": 0
},
"light": {
"area": {
"gradient": {
"start": {
"value": "#ffffff"
},
"stop": {
"value": "#000000"
}
},
"radius": 1000
},
"shadow": {
"color": {
"value": "#000000"
},
"length": 2000
}
}
}
},
"manualParticles": [],
"motion": {
"disable": false,
"reduce": {
"factor": 4,
"value": true
}
},
"name": "Multiple Polygon Masks",
"particles": {
"bounce": {
"horizontal": {
"value": 1
},
"vertical": {
"value": 1
}
},
"collisions": {
"absorb": {
"speed": 2
},
"bounce": {
"horizontal": {
"value": 1
},
"vertical": {
"value": 1
}
},
"enable": false,
"maxSpeed": 50,
"mode": "bounce",
"overlap": {
"enable": true,
"retries": 0
}
},
"color": {
"value": {
"0": "#4285f4",
"1": "#34A853",
"2": "#FBBC05",
"3": "#EA4335"
},
"animation": {
"h": {
"count": 0,
"enable": false,
"speed": 1,
"decay": 0,
"delay": 0,
"sync": true,
"offset": 0
},
"s": {
"count": 0,
"enable": false,
"speed": 1,
"decay": 0,
"delay": 0,
"sync": true,
"offset": 0
},
"l": {
"count": 0,
"enable": false,
"speed": 1,
"decay": 0,
"delay": 0,
"sync": true,
"offset": 0
}
}
},
"effect": {
"close": true,
"fill": true,
"options": {},
"type": {}
},
"groups": [],
"move": {
"angle": {
"offset": 0,
"value": 90
},
"attract": {
"distance": 200,
"enable": false,
"rotate": {
"x": 3000,
"y": 3000
}
},
"center": {
"x": 50,
"y": 50,
"mode": "percent",
"radius": 0
},
"decay": 0,
"distance": {},
"direction": "none",
"drift": 0,
"enable": true,
"gravity": {
"acceleration": 9.81,
"enable": false,
"inverse": false,
"maxSpeed": 50
},
"path": {
"clamp": true,
"delay": {
"value": 0
},
"enable": false,
"options": {}
},
"outModes": {
"default": "bounce",
"bottom": "bounce",
"left": "bounce",
"right": "bounce",
"top": "bounce"
},
"random": false,
"size": false,
"speed": 1,
"spin": {
"acceleration": 0,
"enable": false
},
"straight": false,
"trail": {
"enable": false,
"length": 10,
"fill": {}
},
"vibrate": false,
"warp": false
},
"number": {
"density": {
"enable": false,
"width": 1920,
"height": 1080
},
"limit": {
"mode": "delete",
"value": 0
},
"value": 200
},
"opacity": {
"value": {
"min": 0.05,
"max": 0.4
},
"animation": {
"count": 0,
"enable": true,
"speed": 2,
"decay": 0,
"delay": 0,
"sync": false,
"mode": "auto",
"startValue": "random",
"destroy": "none"
}
}
},
"pauseOnBlur": true,
"pauseOnOutsideViewport": true,
"polygon": {
"draw": {
"enable": true,
"stroke": {
"color": {
"value": "#fff"
},
"width": 0.5,
"opacity": 0.5
}
},
"enable": true,
"inline": {
"arrangement": "equidistant"
},
"move": {
"radius": 1,
"type": "path"
},
"scale": 1,
"type": "inline",
"url": "icon.svg",
"position": {
"x": 25,
"y": 25
}
},
"position": "relative",
"responsive": [],
"size": {
"width": "100px",
"height": "100px"
},
"smooth": false,
"style": {},
"themes": [],
"zLayers": 100
}