Floating Particles

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      body {
        background-color: black;
      }
    </style>
  </head>
  <body>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
      var width = 960,
          height = 500;

var scale = {
        x: d3.scale.linear().domain([0, 1]).range([0, width]),
        y: d3.scale.linear().domain([0, 1]).range([height, 0]),
        r: d3.scale.linear().domain([0, 1]).range([1, 4]),
        a: d3.scale.linear().domain([0, 1]).range([.1, .6])
      };

var canvas = d3.select("body").append("canvas")
        .attr("width", width)
        .attr("height", height);

var context = canvas.node().getContext("2d");

var particles = d3.range(1000)
        .map(function() {
          return {
            x: Math.random(),
            y: Math.random(),
            r: Math.random(),
            t: Math.random()*2*Math.PI
          };
        });

draw(particles);
      setInterval(function() {
        particles = tick(particles);
        draw(particles);
      }, 66);

function draw(particles) {
        context.clearRect(0, 0, width, height);
        particles.forEach(function(d) {
          var x = scale.x(d.x),
              y = scale.y(d.y),
              r = scale.r(d.r),
              a = scale.a(d.r);

context.beginPath()
          context.arc(x, y, r, 0, 2*Math.PI);
          context.fillStyle = "rgba(255, 255, 255," + a + ")";
          context.fill();
        });
      }
    </script>
  </body>
</html>

https://d3js.org/d3.v3.min.js