# particlesjs
> A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
Latest version **2.2.3** (published 2018-08-09) · MIT license · 0 weekly downloads
## Install
```sh
npm install particlesjs
pnpm add particlesjs
yarn add particlesjs
bun add particlesjs
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.2.3 |
| Published | 2018-08-09 |
| First published | 2016-08-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Marc Bruederlin |
| Maintainers | marcbruederlin |
| Keywords | animation, javascript, particles, background, responsive |
## Links
- npm: https://www.npmjs.com/package/particlesjs
- Repository: https://github.com/marcbruederlin/particles.js
- Homepage: https://marcbruederlin.github.io/particles.js/
- Issues: https://github.com/marcbruederlin/particles.js/issues
- npm.io page: https://npm.io/package/particlesjs
## Alternatives
- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads
## Recent versions
- 2.2.3 (latest) — 2018-08-09
- 2.2.2 — 2018-03-22
- 2.2.1 — 2018-02-18
- 2.2.0 — 2018-02-18
- 2.1.0 — 2017-10-30
- 2.0.2 — 2017-03-27
- 2.0.1 — 2017-03-13
- 2.0.0 — 2017-03-10
- 1.0.3 — 2017-03-01
- 1.0.2 — 2016-10-07
- 1.0.1 — 2016-08-02
- 1.0.0 — 2016-08-02
## README
# particles.js
[](https://github.com/marcbruederlin/particles.js/blob/master/dist/particles.min.js)
[](https://travis-ci.org/marcbruederlin/particles.js)
[](https://david-dm.org/marcbruederlin/particles.js)
[](https://david-dm.org/marcbruederlin/particles.js?type=dev)
[](https://www.npmjs.com/package/particlesjs)
[](https://cdnjs.com/libraries/particlesjs)
[](https://raw.githubusercontent.com/marcbruederlin/particles.js/master/LICENSE)
particles.js is a lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
[
](https://marcbruederlin.github.io/particles.js/)
## Installation
There are several ways to install particles.js:
- [Download the latest version](https://github.com/marcbruederlin/particles.js/archive/master.zip)
- Install with npm: `npm install particlesjs --save`
- Use the CDN: `https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js`
## Usage
Include the minified JS in your HTML (right before the closing body tag).
```html
…
```
Add a canvas element to your markup (it should be the last element)
```html
…
```
Add a few styles to your css.
```css
html,
body {
margin: 0;
padding: 0;
}
.background {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
}
```
Initialize the plugin on the `window.onload` event.
```js
window.onload = function() {
Particles.init({
selector: '.background'
});
};
```
## Options
Option | Type | Default | Description
------ | ------------- | ------------- | -----------
`selector` | string | - | *Required:* The CSS selector of your canvas element
`maxParticles` | integer | `100` | *Optional:* Maximum amount of particles
`sizeVariations` | integer | `3` | *Optional:* Amount of size variations
`speed` | integer | `0.5` | *Optional:* Movement speed of the particles
`color` | string or string[] | `#000000` | *Optional:* Color(s) of the particles and connecting lines
`minDistance` | integer | `120` | *Optional:* Distance in `px` for connecting lines
`connectParticles` | boolean | `false` | *Optional:* `true`/`false` if connecting lines should be drawn or not
`responsive` | array | `null` | *Optional:* Array of objects containing breakpoints and options
Example how to use the [responsive option](https://marcbruederlin.github.io/particles.js/#responsive-option).
## Methods
Method | Description
------ | -----------
`pauseAnimation` | Pauses/stops the particle animation
`resumeAnimation` | Continues the particle animation
`destroy` | Destroys the plugin
Example how to use the [public methods](https://marcbruederlin.github.io/particles.js/#use-methods).
## Browser Support
IE9+ and all modern browsers.
## Examples
See [various examples](https://marcbruederlin.github.io/particles.js/#examples) how you can use particles.js.
## 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.
For any problems or questions don't hesitate to open an issue.
## License
particles.js is created by [Marc Brüderlin](https://marcbruederlin.com) and released
under the [MIT license](https://github.com/marcbruederlin/particles.js/blob/master/LICENSE).
## Version 1.x
The source code for particles.js 1.x has been moved to the [v1 branch](https://github.com/marcbruederlin/particles.js/tree/v1).
---
_Source: https://npm.io/package/particlesjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._