mz-particles
Version:
TypeScript library for creating particle effects on canvas.
203 lines (177 loc) • 13 kB
HTML
<html lang="en">
<head>
<title>mzParticles Documentation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
<link id="favicon-48" rel="icon" type="image/png" sizes="48x48" href="/img/favicon/favicon-48.png" />
<link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
<link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
<link rel="stylesheet" href="/css/styles.1682505671423.css" />
<!--<link rel="stylesheet" href="/js/index.1682505671423.css" />-->
</head>
<body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
<header class="py-4 px-4 border-b shadow-sm bg-slate-100 dark:bg-slate-900 dark:text-slate-400 dark:border-black">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center">
<!-- mobile menu button -->
<button
id="mobile-menu-btn"
type="button"
class="mr-4 pointer md:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<a href="/" title="" class="flex items-center ml-6">
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
stroke-width="3.48" stroke="rgba(255, 255, 255, 1)"
class="mr-4"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<circle cx="50%" cy="50%" r="50%" stroke="none" stroke-width="0" fill="rgba(40, 95, 104, 1)"/>
<g transform="translate(3.36, 3.36) scale(0.72)">
<g transform="rotate(25.2 12 12)">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M6 20v-16l6 14l6 -14v16"/>
</g>
</g>
</svg>
<span class="text-slate-600 dark:text-slate-400"><b>mzParticles</b> Documentation</span>
</a>
</div>
<div class="flex items-center">
<!-- themes -->
<button type="button" id="move-to-dark-mode-btn" class="hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3 block" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M14.828 14.828a4 4 0 1 0-5.656-5.656 4 4 0 0 0 5.656 5.656zm-8.485 2.829-1.414 1.414M6.343 6.343 4.929 4.929m12.728 1.414 1.414-1.414m-1.414 12.728 1.414 1.414M4 12H2m10-8V2m8 10h2m-10 8v2"/>
</svg>
</button>
<button type="button" id="move-to-light-mode-btn" class="hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3 block" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path fill="currentColor" stroke="none" d="M12 1.992a10 10 0 1 0 9.236 13.838c.341-.82-.476-1.644-1.298-1.31a6.5 6.5 0 0 1-6.864-10.787l.077-.08c.551-.63.113-1.653-.758-1.653h-.266l-.068-.006-.06-.002z"/>
</svg>
</button>
<a href="https://github.com/mzusin/mz-particles" class="mx-3 block text-slate-400 hover:text-slate-500"><span class="sr-only">mzParticles on GitHub</span><svg viewBox="0 0 16 16" class="w-5 h-5" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a>
</div>
</div>
</header>
<div class="container mx-auto flex-1 overflow-hidden">
<div class="flex h-full">
<div class="side-menu border-r dark:border-slate-900 shadow-md overflow-y-auto h-full max-w-full min-w-270 md:w-350 absolute md:static md:left-auto bg-white dark:bg-slate-900 z-50" id="side-menu">
<div class="px-6 pb-4 flex flex-col relative">
<!-- mobile menu close -->
<button type="button" class="pointer absolute right-4 top-2 md:hidden" id="mobile-menu-close-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M18 6 6 18M6 6l12 12"/>
</svg>
</button>
<div class="text-xl my-4 flex items-center cursor-pointer" data-collapsible-title data-opened="true" data-id="10-main">
Main
<svg data-arrow xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="#626e7f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="ml-2 rotate-90" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="m7 7 5 5-5 5m6-10 5 5-5 5"/>
</svg>
</div><div class="flex flex-col" data-links><a href="/pages/basic-usage.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 text-slate-500">Basic Usage</a></div><div class="text-xl my-4 flex items-center cursor-pointer" data-collapsible-title data-opened="true" data-id="20-shapes">
Shapes
<svg data-arrow xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="#626e7f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="ml-2 rotate-90" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="m7 7 5 5-5 5m6-10 5 5-5 5"/>
</svg>
</div><div class="flex flex-col" data-links><a href="/pages/circles.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Circles</a><a href="/pages/stars.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Stars</a><a href="/pages/triangles.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 text-slate-500">Triangles</a></div><div class="text-xl my-4 flex items-center cursor-pointer" data-collapsible-title data-opened="true" data-id="100-settings">
Settings
<svg data-arrow xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="#626e7f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="ml-2 rotate-90" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="m7 7 5 5-5 5m6-10 5 5-5 5"/>
</svg>
</div><div class="flex flex-col" data-links><a href="/pages/settings.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Settings</a><a href="/pages/canvas-settings.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Canvas Settings</a><a href="/pages/particles-number.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Particles Number</a><a href="/pages/particles-settings.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-sky-500">Particles Settings</a><a href="/pages/connecting-lines.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Connecting Lines</a><a href="/pages/rotation-effect.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Rotation Effect</a><a href="/pages/scale-effect.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Scale Effect</a><a href="/pages/fade-effect.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 text-slate-500">Fade Effect</a></div>
</div>
</div>
<div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
<div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h1 class="text-3xl mb-8">Particles Settings</h1>
<ul class="list-disc mb-10 ml-2 pl-2 leading-8">
<li>
<p class="mb-4"><strong class="font-bold">particlesColors?: string[]</strong> - An array of strings representing the possible colors for the particles. The colors can be specified in any valid CSS color format (e.g. “#FFFFFF”, “rgb(255, 0, 0)”, “hsl(120, 100%, 50%)”). If this property is not specified or if the array is empty, the particles will be given random colors.</p>
</li>
<li>
<p class="mb-4"><strong class="font-bold">svgPathData?: string</strong>[] - An optional array of strings representing the path data for the SVG shape that will be used to generate the particles. The svgPathData is a sequence of commands and coordinates that describe the shape of the SVG path. If this property is not specified, the circle shape will be used.</p>
</li>
<li>
<p class="mb-4"><strong class="font-bold">minSpeed?: number</strong> - The minimum speed that particles can travel at. This value should be specified in pixels per frame. If this property is not specified, the default value of <strong class="font-bold">-2</strong> will be used.</p>
</li>
<li>
<p class="mb-4"><strong class="font-bold">maxSpeed?: number</strong> - The maximum speed that particles can travel at. This value should be specified in pixels per frame. If this property is not specified, the default value of <strong class="font-bold">2</strong> will be used.</p>
</li>
<li>
<p class="mb-4"><strong class="font-bold">minSize?: number</strong> - The minimum size of particles. This value should be specified in pixels. If this property is not specified, the default value of <strong class="font-bold">5</strong> will be used.</p>
</li>
<li>
<p class="mb-4"><strong class="font-bold">maxSize?: number</strong> - The maximum size of particles. This value should be specified in pixels. If this property is not specified, the default value of <strong class="font-bold">10</strong> will be used.</p>
</li>
</ul>
</div>
<div class="w-800 max-w-full mx-auto grid lg:grid-cols-2 gap-8 items-center text-slate-500">
<div class="flex justify-between items-start border border-slate-200 rounded p-4">
<a href="/pages/particles-number.html" title="" class="mr-4 hover:text-blue-500">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M5 12h14M5 12l6 6m-6-6 6-6"/>
</svg>
</a>
<div class="flex flex-col items-end justify-center">
<div class="mb-2 text-sm text-slate-300">Previous</div>
<a href="/pages/particles-number.html" title="" class="hover:text-blue-500">Particles Number</a>
</div>
</div>
<div class="flex justify-between items-start border border-slate-200 rounded p-4">
<div class="flex flex-col justify-center">
<div class="mb-2 text-sm text-slate-300">Next</div>
<a href="/pages/connecting-lines.html" title="" class="hover:text-blue-500">Connecting Lines</a>
</div>
<a href="/pages/connecting-lines.html" title="" class="mr-4 hover:text-blue-500">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M5 12h14m-6 6 6-6m-6-6 6 6"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!--<footer class="py-2 px-4 border-t">
<div class="container mx-auto">
Footer
</div>
</footer>-->
<script src="/js/index.1682505671423.js"></script>
</body>
</html>