particles.js

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

Demo

Installation

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/particlesjs@1.0.1/dist/particles.min.js

Usage

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 });
};

Options

Option	Default	Description
selector	-	Required: The CSS selector of your canvas element
maxParticles	100	Optional: Maximum amount of particles
sizeVariations	3	Optional: Amount of size variations
speed	0.5	Optional: Movement speed of the particles
color	#000000	Optional: Color of particles and connecting lines
minDistance	120	Optional: Distance in px for conntecting lines
connectParticles	false	Optional: true/false if connecting lines should be drawn

Browser Support

IE10+ and all modern browsers.

Build

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.

Using particles.js?

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.

License

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.