mz-particles
Version:
TypeScript library for creating particle effects on canvas.
43 lines (39 loc) • 1.55 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<style>
html, body{
padding: 0;
margin: 0;
}
#placeholder{
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="placeholder"></div>
<script src="../dist/mz-particles.min.js"></script>
<script>
window.particles({
$placeholder: document.getElementById('placeholder'),
canvasColor: 'rgb(17, 24, 39)',
particlesNumber: 100,
minSize: 10,
maxSize: 30,
particlesColors: [
'#CEA262', '#f3a73a', '#fffc00', '#92ccfa',
'#5daed2', '#366d8c'
],
rotate: true,
svgPathData: [
'M87.83013 0c-14 14-14 29.33333 0 46 21 25-32.43145 60-49 60-.19935 0-.39869-.0042-.59797-.01255 7.08619-6.21018 11.67362-14.22984 13.76303-24.05977 4.5614-21.4597.56555-33.54498-11.98755-36.25582L39.943 45.658l.22215.0701c9.81728 3.21101 12.55675 15.02165 8.21842 35.4319-2.12755 10.00933-6.56305 18.12634-13.3065 24.35103 1.04573.2715 2.09961.43219 3.1551.47641-8.57298 7.51287-20.80434 12.3759-36.69332 14.5883l-1.35436-.28787a.23289.23289 0 0 1-.1825-.19756c-.0167-.12753.07315-.24445.20068-.26118 15.04296-1.9701 26.66776-6.7428 34.8744-14.3181C19.89489 101.5944 6.20894 74.65142 10.83013 46c3.33334-20.66667 29-36 77-46Z',
],
});
</script>
</body>
</html>