1<div id="particles-js"></div>
2
3<script src="particles.js"></script>

1{
2  "particles": {
3    "number": {
4      "value": 80,
5      "density": {
6        "enable": true,
7        "value_area": 800
8      }
9    },
10    "color": {
11      "value": "#ffffff"
12    },
13    "shape": {
14      "type": "circle",
15      "stroke": {
16        "width": 0,
17        "color": "#000000"
18      },
19      "polygon": {
20        "nb_sides": 5
21      },
22      "image": {
23        "src": "img/github.svg",
24        "width": 100,
25        "height": 100
26      }
27    },
28    "opacity": {
29      "value": 0.5,
30      "random": false,
31      "anim": {
32        "enable": false,
33        "speed": 1,
34        "opacity_min": 0.1,
35        "sync": false
36      }
37    },
38    "size": {
39      "value": 10,
40      "random": true,
41      "anim": {
42        "enable": false,
43        "speed": 80,
44        "size_min": 0.1,
45        "sync": false
46      }
47    },
48    "line_linked": {
49      "enable": true,
50      "distance": 300,
51      "color": "#ffffff",
52      "opacity": 0.4,
53      "width": 2
54    },
55    "move": {
56      "enable": true,
57      "speed": 12,
58      "direction": "none",
59      "random": false,
60      "straight": false,
61      "out_mode": "out",
62      "bounce": false,
63      "attract": {
64        "enable": false,
65        "rotateX": 600,
66        "rotateY": 1200
67      }
68    }
69  },
70  "interactivity": {
71    "detect_on": "canvas",
72    "events": {
73      "onhover": {
74        "enable": false,
75        "mode": "repulse"
76      },
77      "onclick": {
78        "enable": true,
79        "mode": "push"
80      },
81      "resize": true
82    },
83    "modes": {
84      "grab": {
85        "distance": 800,
86        "line_linked": {
87          "opacity": 1
88        }
89      },
90      "bubble": {
91        "distance": 800,
92        "size": 80,
93        "duration": 2,
94        "opacity": 0.8,
95        "speed": 3
96      },
97      "repulse": {
98        "distance": 400,
99        "duration": 0.4
100      },
101      "push": {
102        "particles_nb": 4
103      },
104      "remove": {
105        "particles_nb": 2
106      }
107    }
108  },
109  "retina_detect": true
110}

1/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
2particlesJS.load('particles-js', 'assets/particles.json', function() {
3  console.log('callback - particles.js config loaded');
4});