<body>
<div id="particles-js"></div>
</body>
<!-- Added particlesjs CDN externally-->#particles-js {
background-color: #a0d0f8;
height: 860px;
width: 100%;
}// Either Replace particles.json path with the following content
/* Recommended Approach:
Create a particles.json file where you store it's actual content. It would make a much cleaner code.
*/
particlesJS("particles-js", {
"particles": {
"number": {
"value": 60
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#f2f3f6"
}
},
"polygon": {
"nb_sides": 3
},
"opacity": {
"value": 0.8,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
}
})
External CSS
This Pen doesn't use any external CSS resources.