demo.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		body, html {
			padding: 0;
			margin: 0;
			height: 100%;
			overflow: hidden
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
</body>
<script src="./out/particle.js"></script>
<script type="text/javascript">


var canvas = document.getElementById("canvas");

canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

var pjs = new ParticleJS(canvas, [],{drawCanvasBackground: true, canvasBGColor: "#2F5168"});


var d = `M 0 0 L 0 105 M 0 61.5 L 61.5 0 M 17 44 L 61.5 105 M 81.38697428310476 34.7150396039779 A 32 32 0 0 1 128.0184936160645 42.85354256067211 M 97.0767174181432 63.31228973972378 A 365 365 0 0 1 128.00000000000003 62 M 97 102 A 19 19 0 0 1 97 64 M 127.61833855844927 75.84946841624716 A 31 31 0 0 1 97 102 M 128 42 L 128 105 M 160.5 27 L 160.5 105 M 161.6318519781126 47.291267499687024 A 32 32 0 0 1 196.9962020667432 28.566807976681964 M 263 42 L 263 105 M 216.38697428310476 34.7150396039779 A 32 32 0 0 1 263.01849361606446 42.85354256067211 M 232.0767174181432 63.31228973972378 A 365 365 0 0 1 263 62 M 232 102 A 19 19 0 0 1 232 64 M 262.6183385584493 75.84946841624716 A 31 31 0 0 1 232 102 M 294 27 L 294 105 M 295.1911894296917 50.63026681882313 A 30 30 0 0 1 348.8124172282369 42.13749866443608 M 349 42 L 349 105 `;

var wave = new ParticleJSAnimations.WaveAnimation(215, [
	{
		time: 0,
		amplitude: 100,
		wavelength: 20,
		phase: 0,
		timePeriod: 10,
		increment: 0.1
	},
	{
		time: 0,
		amplitude: 40,
		wavelength: 1000,
		phase: 0,
		timePeriod: 10,
		increment: 0.1
	}
], {top: 500, width: 300});

pjs.addDrawObject(wave);

pjs.start();

var random;

function collapse() {
	var atomset = pjs.removeDrawObject(random);
	var svg = new ParticleJSAnimations.SVGAnimation(d,null,atomset);
	svg.move({x:100,y:200});
	pjs.addDrawObject(svg);
}

function convert() {
	var atomset = pjs.removeDrawObject(wave);
	random = new ParticleJSAnimations.FadeExplode({minSpeed: 0, maxSpeed: 10}, atomset);
	pjs.addDrawObject(random);
	setTimeout(collapse, 500)
}

setTimeout(convert, 500)
</script>
</html>