firasx/algorithm-playground

1class CustomParticles extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        :host {7          position: fixed;8          top: 0;9          left: 0;10          width: 100%;11          height: 100%;12          z-index: -1;13          pointer-events: none;14        }15        #particles-js {16          width: 100%;17          height: 100%;18        }19      </style>20      <div id="particles-js"></div>21    `;22    23    this.initParticles();24  }25 26  initParticles() {27    const script = document.createElement('script');28    script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js';29    script.onload = () => {30      particlesJS('particles-js', {31        particles: {32          number: { value: 80, density: { enable: true, value_area: 800 } },33          color: { value: "#7e22ce" },34          shape: { type: "circle" },35          opacity: { value: 0.5, random: true },36          size: { value: 3, random: true },37          line_linked: { enable: true, distance: 150, color: "#7e22ce", opacity: 0.4, width: 1 },38          move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" }39        },40        interactivity: {41          detect_on: "canvas",42          events: {43            onhover: { enable: true, mode: "repulse" },44            onclick: { enable: true, mode: "push" }45          }46        }47      });48    };49    document.head.appendChild(script);50  }51}52customElements.define('custom-particles', CustomParticles);