Interactive Particle Background - Code
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0F2027 0%, #203A43 100%);
}
#particles-js {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
</style>
<body>
<div id='particles-js'></div>
<script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script>
<script>
particlesJS('particles-js', {
particles: {
number: { value:50, density: { enable: true, value_area: 800 } },
color: { value: '#ffffff' },
shape: {
type: 'circle',
stroke: { width: 0, color: '#000000' },
polygon: { nb_sides: 5 },
},
opacity: { value: 0.5, random: false },
size: { value: 3, random: true },
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 },
},
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: { enable: true, mode: 'grab' },
onclick: { enable: true, mode: 'push' },
resize: true,
},
modes: {
grab: {
distance: 140,
line_linked: { opacity: 1 }
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: { distance: 200, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 },
},
},
retina_detect: true,
});
</script>
</body>