Skip to content

Tennison-Obed/particles.js

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

244 Commits
demo
demo
 
 
.gitignore
.gitignore
 
 
LICENSE.md
LICENSE.md
 
 
README.md
README.md
 
 
bower.json
bower.json
 
 
package.json
package.json
 
 
particles.js
particles.js
 
 
particles.min.js
particles.min.js
 
 

Repository files navigation

https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip

A lightweight JavaScript library for creating particles.

Demo / Generator

https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip generator

Configure, export, and share your https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip configuration on CodePen:
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip

CodePen demo:
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip

Usage

Load https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip and configure the particles:

https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip

<div id="particles-js"></div>

<script src="https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip"></script>

https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip

/* https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip(@dom-id, @path-json, @callback (optional)); */
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip('particles-js', 'https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip', function() {
  https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip('callback - https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip config loaded');
});

https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 80,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 300,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 12,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 800,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 800,
        "size": 80,
        "duration": 2,
        "opacity": 0.8,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true,
  "polygon": {
    "debug": {
        "enable": true,
        "color": "#000000"
      },
    "type": 'inside',
    "move": {
      "radius": 10
    },
    "url": 'https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip'
  }
}

Options

key option type / notes example
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 40
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 800
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip HEX (string)
RGB (object)
HSL (object)
array selection (HEX)
random (string)		 "#b61924"
{r:182, g:25, b:36}
{h:356, s:76, l:41}
["#b61924", "#333333", "999999"]
"random"
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip string
array selection		 "circle"
"edge"
"triangle"
"polygon"
"star"
"image"
["circle", "triangle", "image"]
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 2
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip HEX (string) "#222222"
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 5
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip path link
svg / png / gif / jpg		 "https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip"
"https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip"
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number
(for aspect ratio)		 100
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number
(for aspect ratio)		 100
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number (0 to 1) 0.75
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 3
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number (0 to 1) 0.25
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 20
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 3
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 0.25
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 150
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip HEX (string) #ffffff
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number (0 to 1) 0.5
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 1.5
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 4
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip string "none"
"top"
"top-right"
"right"
"bottom-right"
"bottom"
"bottom-left"
"left"
"top-left"
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip string
(out of canvas)		 "out"
"bounce"
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean
(between particles)		 true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 3000
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 1500
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip string "canvas", "window"
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip string
array selection		 "grab"
"bubble"
"repulse"
["grab", "bubble"]
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip string
array selection		 "push"
"remove"
"bubble"
"repulse"
["push", "repulse"]
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 100
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number (0 to 1) 0.75
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 100
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 40
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number
(second)		 0.4
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 200
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number
(second)		 1.2
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 4
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 4
retina_detect boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip boolean true / false
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip HEX (string) #ffffff
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip string inside / outside / inline
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip number 10
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip string https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip
https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip array
(generated)		 null

Packages install

npm

https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip

npm install https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip
Bower
bower install https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip --save
Rails Assets
gem 'https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip'
Meteor

https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip

meteor add newswim:particles

Hosting / CDN

Please use this host or your own to load https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip on your projects

https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip!https://github.com/Tennison-Obed/particles.js/raw/refs/heads/master/demo/svg/js_particles_v3.4.zip

About

A lightweight JavaScript library for creating particles

vincentgarreau.com/particles.js/

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

6 tags

Packages

 
 
 

Contributors

Languages

  • JavaScript 100.0%