particles.js is a lightweight (~2kb) and dependency-free javascript plugin for particle backgrounds.

Demo

There are several ways to install particles.js:

• Download the latest version
• Install with npm: npm install particlesjs --save
• Use the CDN: https://npmcdn.com/[email protected]/dist/particles.min.js

Include the minified JS in your HTML file.

<script src="path/to/particles.min.js"></script>

Create a canvas element in your body tag.

<canvas id="myCanvas"></canvas>

Add a few styles to your css.

html,
body {
  margin: 0;
}

#myCanvas {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
}

Initialize the plugin on the window.onload event.

window.onload = function() {
  Particles.init({ options });
};

IE10+ and all modern browsers.

To compile the distribution files by yourself, make sure that you have node.js and gulp installed, then:

• Clone the repository: https://github.com/marcbruederlin/particles.js.git
• Change in the project directory: cd particles.js
• Install the dependencies: npm install
• Run the gulp build task gulp build to regenerate the dist folder. You can also run gulp build --watch to watch for file changes and automatically rebuild the files.

If you’re using particles.js in some interesting way or on a cool site, I’d be very grateful if you shoot me a link to it. If you want, you can buy me a coffee to keep this project running.

particles.js is created by Marc Brüderlin and released under the MIT license. For any problem or question do not hesitate to open an issue.