How to use it

<div id="tsparticles"></div>

<!-- tsParticles library -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles@1.17.8/dist/tsparticles.min.js"></script>

<!-- tsParticles Big Circles preset -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-big-circles@1.2.9/dist/tsparticles.preset.bigCircles.min.js"></script>

#tsparticles {
  position: fixed;
  width: 100%;
  height: 100%;
}

tsParticles.load("tsparticles", {
  preset: "big-circles"
});

And you're done, you can have this beautiful animation easily in your website.

If you want to customize it, you can still override tsParticles properties in your config like this:

tsParticles.load("tsparticles", {
  particles: {
    shape: {
      type: "square"
    }
  },
  preset: "big-circles"
});

You can see a sample of this configuration here:

And with this configuration you will have colored Big Squares.

matteobruni / tsparticles

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components