<div id="tsparticles"></div>
<div id="instances">tsParticles Instances: <span></span><button type="button">Refresh!</button></div>
#instances {
  position: fixed;
  left: 30px;
  top: 30px;
  background: #fff;
  color: #000;
  padding: 5px;
  font-family: Verdana;
}
const updateInstances = () => {
  document.querySelector("#instances span").innerText = `${
    tsParticles.dom().length
  }`;
};

const refreshParticles = () => {
  tsParticles.load("tsparticles", {
    background: {
      color: "#000"
    },
    interactivity: {
      events: {
        onClick: { enable: true, mode: "push" },
        onHover: {
          enable: true,
          mode: "repulse"
        },
        resize: true
      },
      modes: {
        push: { quantity: 4 },
        repulse: { distance: 200, duration: 0.4 }
      }
    },
    particles: {
      color: { value: "#ffffff" },
      move: {
        bounce: false,
        direction: "none",
        enable: true,
        outModes: "out",
        random: false,
        speed: 2,
        straight: false
      },
      number: { density: { enable: true, area: 800 }, value: 200 },
      opacity: {
        value: 0.5
      },
      links: {
        enable: true
      },
      size: {
        value: 1
      }
    }
  });

  updateInstances();
};

refreshParticles();

document
  .querySelector("#instances button")
  .addEventListener("click", refreshParticles);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/tsparticles@1.41.4/tsparticles.min.js