D3 Examples -

Old school D3 from simpler times

meetamit

Full window Github gist

<!DOCTYPE html>
<meta charset="utf-8">
<style>body { background-color:black; }</style>
<svg width="960" height="720"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    rainbow = d3.scaleSequential(d3.interpolateRainbow),
    points = d3.range(1000).map(phyllotaxis(10));

var g = svg.append("g");

var point = g.selectAll("circle").data(points)
point = point.enter().append("circle")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .merge(point)

var t0 = Date.now()
function tick() {
  var t = Date.now() - t0
  var m = 8 + .1 * Math.cos(2 * Math.PI * (t / 1000) / /* seconds per cycle: */ 20)
  var o = t/200

point
    .attr("r", (d,i) => 6 * Math.pow(Math.sin(.75 * Math.PI * (mod(i - o, m) + 1) / m), 1.5)  )
    .attr("fill", (d,i) => rainbow(.5 * (i / points.length - t/1000/10)))

requestAnimationFrame(tick)
}
tick()

function mod(n, m) {
  return ((n % m) + m) % m;
};

// Credit: @mbostock, via https://bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084
function phyllotaxis(radius) {
  var theta = Math.PI * (3 - Math.sqrt(5));
  return function(i) {
    var r = radius * Math.sqrt(i), a = theta * i;
    return {
      x: width / 2 + r * Math.cos(a),
      y: height / 2 + r * Math.sin(a)
    };
  };
}

</script>

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