<!-- tsParticles container -->
<div id="tsparticles"></div>
<!-- https://github.com/matteobruni/tsparticles -->
<div class="github">
  <a class="btn btn-link" href="https://github.com/matteobruni/tsparticles" title="Find more info on GitHub">
    <img class="img-fluid" id="gh-mark" src="https://particles.js.org/images/GitHub-Mark-120px-plus.png" alt="">
    <span id="gh-project">tsParticles</span>
  </a>
  <div>
    <a class="github-button" href="https://github.com/matteobruni/tsparticles" data-icon="octicon-star" aria-label="Star matteobruni/tsparticles on GitHub">Star</a>
    <a class="github-button" href="https://github.com/matteobruni/tsparticles/fork" data-icon="octicon-repo-forked" aria-label="Fork matteobruni/tsparticles on GitHub">Fork</a>
  </div>
</div>
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
/* ---- reset ---- */
.github {
  bottom: 10px;
  right: 10px;
  position: fixed;
  border-radius: 10px;
  background: #fff;
  padding: 0 12px 6px 12px;
  border: 1px solid #000;
}

.github a:hover,
.github a:link,
.github a:visited,
.github a:active {
  color: #000;
  text-decoration: none;
}

.github img {
  height: 30px;
}

.github #gh-project {
  font-size: 20px;
  padding-left: 5px;
  font-weight: bold;
  vertical-align: bottom;
}
(async () => {
  await loadColorUpdater(tsParticles);
  await loadCircleShape(tsParticles);
  await loadBaseMover(tsParticles);
  await loadSizeUpdater(tsParticles);
  await loadOpacityUpdater(tsParticles);
  await loadOutModesUpdater(tsParticles);

  await tsParticles.load("tsparticles", {
    fpsLimit: 120,
    background: {
      color: "#000"
    },
    particles: {
      color: { value: "#ffffff" },
      move: {
        direction: "none",
        enable: true,
        outModes: "out",
        random: false,
        speed: 2,
        straight: false
      },
      number: { density: { enable: true, area: 800 }, value: 80 },
      opacity: {
        value: 0.5
      },
      shape: {
        type: "circle"
      },
      size: {
        value: { min: 1, max: 5 }
      }
    }
  });
})();

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.engine.min.js
  2. https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.shape.circle.min.js
  3. https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.updater.size.min.js
  4. https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.move.base.min.js
  5. https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.updater.out-modes.min.js
  6. https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.updater.opacity.min.js
  7. https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.updater.color.min.js