<!-- tsParticles container -->
<div id="tsparticles"></div>
<!-- tsParticles lib - 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%;
}
const shapeName = "your-name";

tsParticles.addShape(shapeName, function (context, particle, radius) {
  if (!particle.customWidth) {
    particle.customWidth =
      Math.random() * radius * particle.shapeData.factors.width;
  }

  if (!particle.customHeight) {
    particle.customHeight =
      Math.random() * radius * particle.shapeData.factors.height;
  }

  context.rect(
    -particle.customWidth / 2,
    -particle.customHeight / 2,
    particle.customWidth,
    particle.customHeight
  );
});

tsParticles.load("tsparticles", {
  particles: {
    color: {
      value: "random"
    },
    size: {
      value: 20
    },
    links: {
      enable: false
    },
    move: {
      enable: true
    },
    shape: {
      type: shapeName,
      options: {
        "your-name": {
          factors: {
            width: 2,
            height: 5
          }
        }
      }
    }
  },
  background: {
    color: "#000"
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/tsparticles@1.33.3/tsparticles.min.js