<!-- tsParticles container -->
<div id="tsparticles"></div>
<div id="bubble-circle-div">&nbsp;</div>
<div id="repulse-circle-div">&nbsp;</div>
<div id="bubble-rectangle-div">&nbsp;</div>
<div id="repulse-rectangle-div">&nbsp;</div>
<!-- https://github.com/matteobruni/tsparticles -->
/* ---- reset ---- */
body {
  margin: 0;
  font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
  display: block;
  vertical-align: bottom;
}
/* ---- tsparticles container ---- */
#tsparticles {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
}

#bubble-circle-div {
  position: absolute;
  left: 10%;
  top: 10%;
  border-radius: 100px;
  width: 200px;
  height: 200px;
  background: #00000022;
  z-index: 200;
}

#repulse-circle-div {
  position: absolute;
  right: 10%;
  top: 10%;
  border-radius: 100px;
  width: 200px;
  height: 200px;
  background: #00000022;
  z-index: 200;
}

#bubble-rectangle-div {
  position: absolute;
  left: 10%;
  bottom: 10%;
  width: 200px;
  height: 200px;
  background: #00000022;
  z-index: 200;
}

#repulse-rectangle-div {
  position: absolute;
  right: 10%;
  bottom: 10%;
  width: 200px;
  height: 200px;
  background: #00000022;
  z-index: 200;
}
tsParticles.load("tsparticles", {
  fps_limit: 60,
  background: {
    color: "#0d47a1"
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      ondiv: [
        {
          enable: true,
          elementId: "bubble-circle-div",
          mode: "bubble",
          type: "circle"
        },
        {
          enable: true,
          elementId: "repulse-circle-div",
          mode: "repulse",
          type: "circle"
        },
        {
          enable: true,
          elementId: "bubble-rectangle-div",
          mode: "bubble",
          type: "rectangle"
        },
        {
          enable: true,
          elementId: "repulse-rectangle-div",
          mode: "repulse",
          type: "rectangle"
        }
      ],
      resize: true
    },
    modes: {
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 0.8,
        size: 6,
        speed: 3,
        color: "#000000"
      },
      grab: { distance: 400, line_linked: { opacity: 1 } },
      push: { particles_nb: 4 },
      remove: { particles_nb: 2 },
      repulse: { distance: 200, duration: 0.4 }
    }
  },
  particles: {
    color: { value: "#ffffff" },
    line_linked: {
      color: "#ffffff",
      distance: 150,
      enable: true,
      opacity: 0.4,
      width: 1
    },
    move: {
      attract: { enable: false, rotateX: 600, rotateY: 1200 },
      bounce: false,
      direction: "none",
      enable: true,
      out_mode: "out",
      random: false,
      speed: 2,
      straight: false
    },
    number: { density: { enable: true, value_area: 800 }, value: 80 },
    opacity: {
      anim: { enable: false, opacity_min: 0.1, speed: 1, sync: false },
      random: false,
      value: 0.5
    },
    shape: {
      type: "circle"
    },
    size: {
      anim: { enable: false, size_min: 0.1, speed: 40, sync: false },
      random: true,
      value: 5
    }
  },
  polygon: {
    draw: { enable: false, lineColor: "#ffffff", lineWidth: 0.5 },
    move: { radius: 10 },
    scale: 1,
    type: "none",
    url: ""
  },
  retina_detect: true
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/tsparticles@1.17.0-beta.7/dist/tsparticles.min.js