<div id="space"></div>
* {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}


#space {
  width: 100%;
  height: 100vh;
  background: black;
}
particlesJS("space", {
  "particles": {
    "number": {
      "value": 50,
      "density": {
        "enable": true,
        "value_area": 500
      }
    },
    "color": {
      "value": "#fff"
    },
    "opacity": {
      "value": 1,
      "anim": {
        "enable": true,
        "speed": 8,
        "opacity_min": 0.4,
        "sync": false
      }
    },
    "shape": {
      "type": "circle"
    },
    "size": {
      "value": 5,
      "random": true
    },
    "line_linked": {
      "enable": false
    },
    "move": {
      "enable": true,
      "speed": 3,
      "direction": "right",
      "straight": true
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false
      },
      "onclick": {
        "enable": false
      }
    }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js