<!-- 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%;
}

tsParticles.addPreset("random-stroke", {
  fpsLimit: 60,
  particles: {
    color: {
      value: "random"
    },
    stroke: {
      color: {
        value: "random"
      },
      width: 1
    }
  }
});

tsParticles.addPreset("no-links", {
  particles: {
    lineLinked: {
      enable: false
    }
  }
});

tsParticles.addPreset("rotating", {
  particles: {
    rotate: {
      random: true,
      direction: "clockwise",
      animation: {
        enable: true,
        speed: 10,
        sync: false
      }
    }
  }
});

tsParticles.load("tsparticles", {
  particles: {
    size: {
      value: 20
    },
    shape: {
      type: ["spiral", "heart"],
      custom: {
        spiral: {
          innerRadius: 1,
          lineSpacing: 1,
          fill: false,
          close: false
        }
      }
    }
  },
  preset: ["basic", "random-stroke", "no-links", "rotating"],
  background: {
    color: "#000"
  }
});