mz-particles

<!DOCTYPE html> <html lang="en"> <head> <title>mzParticles Documentation</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1" />  <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">  <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" />  </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">  <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">  <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">  <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-sky-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-slate-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">Stars</h1> <p class="mb-4">This example creates a particle effect with rotated triangles.</p> <pre class="hljs p-4 mb-4 rounded-md shadow-xl overflow-auto whitespace-pre-wrap text-base"><code><span class="hljs-title function_">particles</span>({ <span class="hljs-attr">$placeholder</span>: <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'placeholder'</span>), <span class="hljs-attr">canvasColor</span>: <span class="hljs-string">'rgb(17, 24, 39)'</span>, <span class="hljs-attr">particlesNumber</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">minSize</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">maxSize</span>: <span class="hljs-number">30</span>, <span class="hljs-attr">particlesColors</span>: [ <span class="hljs-string">'#c20cff'</span>, <span class="hljs-string">'#ff0000'</span>, <span class="hljs-string">'#ff00ef'</span>, <span class="hljs-string">'#eaeaea'</span>, <span class="hljs-string">'#8e3da4'</span>, <span class="hljs-string">'#d387d2'</span> ], <span class="hljs-comment">// star -------------</span> <span class="hljs-attr">rotate</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">svgPathData</span>: [ <span class="hljs-string">'M9.5 0 19 19H0z'</span>, <span class="hljs-comment">//'M18.5 0 37 18H0z',</span> <span class="hljs-comment">//'m9 0 9 25H0z',</span> <span class="hljs-comment">//'m0 0 32 25H0z',</span> ], });</code></pre> </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/stars.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/stars.html" title="" class="hover:text-blue-500">Stars</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/settings.html" title="" class="hover:text-blue-500">Settings</a> </div> <a href="/pages/settings.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>  <script src="/js/index.1682505671423.js"></script> </body> </html>