app.js

/* -----------------------------------------------
/* How to use? : Check the GitHub README
/* ----------------------------------------------- */

/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
/*
particlesJS.load('particles-js', 'particles.json', function() {
  console.log('particles.js loaded - callback');
});


/* Otherwise just put the config content (json): */

particlesJS('particles-js', {
	particles: {
		number: {
			value: 60,
			density: {
				enable: true,
				value_area: 800
			}
		},
		color: {
			value: '#c7f2d2'
		},
		shape: {
			type: 'circle',
			stroke: {
				width: 0,
				color: '#000000'
			},
			polygon: {
				nb_sides: 5
			},
			image: {
				src: 'img/github.svg',
				width: 100,
				height: 100
			}
		},
		opacity: {
			value: 1,
			random: true,
			anim: {
				enable: true,
				speed: 1,
				opacity_min: 0.2,
				sync: false
			}
		},
		size: {
			value: 4,
			random: true,
			anim: {
				enable: true,
				speed: 3,
				size_min: 0.2,
				sync: false
			}
		},
		line_linked: {
			enable: false,
			distance: 176.3753266952075,
			color: '#ffffff',
			opacity: 0.08818766334760375,
			width: 1
		},
		move: {
			enable: true,
			speed: 2,
			direction: 'none',
			random: true,
			straight: false,
			out_mode: 'out',
			bounce: false,
			attract: {
				enable: false,
				rotateX: 600,
				rotateY: 1200
			}
		}
	},
	interactivity: {
		detect_on: 'window',
		events: {
			onhover: {
				enable: true,
				mode: 'repulse'
			},
			onclick: {
				enable: true,
				mode: 'bubble'
			},
			resize: true
		},
		modes: {
			grab: {
				distance: 400,
				line_linked: {
					opacity: 1
				}
			},
			bubble: {
				distance: 500,
				size: 5,
				duration: 0.5,
				opacity: 1,
				speed: 1
			},
			repulse: {
				distance: 200,
				duration: 0.4
			},
			push: {
				particles_nb: 4
			},
			remove: {
				particles_nb: 2
			}
		}
	},
	retina_detect: true
});