tsparticles link

by Sebastian Kay

HTML

<!-- https://github.com/tsparticles/tsparticles
https://particles.js.org
https://confetti.js.org
-->

CSS

#refresh-config {
  bottom: 5px;
  left: 5px;
  position: fixed;
  z-index: 1000;
}

/* ---- reset ---- */
.github {
  z-index: 10000;
  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;
}

JavaScript

import { tsParticles } from "https://cdn.jsdelivr.net/npm/@tsparticles/[email protected]/+esm";
import { loadAll } from "https://cdn.jsdelivr.net/npm/@tsparticles/[email protected]/+esm";

async function loadParticles(options) {
  await loadAll(tsParticles);

  await tsParticles.load({ id: "tsparticles", options });
}

const configs = {
  particles: {
    number: {
      value: 30
    },
    color: {
      value: "#ffffff"
    },
    links: {
      enable: true,
      distance: 200
    },
    shape: {
      type: "circle"
    },
    opacity: {
      value: 1
    },
    size: {
      value: {
        min: 2,
        max: 4
      }
    },
    move: {
      enable: true,
      speed: 0.2
    }
  },
  background: {
    color: "#000000"
  },
  poisson: {
    enable: true
  }
};

loadParticles(configs);