dotted background intro

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    body {
      background: #0d1215;
    }
  </style>
</head>

<body>
  <script>
    let height = 500
    let width = 960
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    
    // background dots
    let dotStep = 20
			, rows = height / dotStep
    	, cols = width / dotStep
    
		d3.range(rows).map(function(d, i) {
      d3.range(cols).map(function(e, j) {        
        svg.append("rect").classed("pip", true)
          .attr("height", 2)
          .attr("width", 2)
          .attr("fill", "#807c7b")
          .attr("x", width / 2)
        	.attr("y", height / 2)
          .transition().duration(750)
            .attr("y", () => dotStep * d + dotStep)
        		.transition().duration(750 + (j / cols) * 500).ease(d3.easeCubicOut)
        			.attr("x", () => dotStep * j + dotStep)
      })
    })
    
    // widget
    let wHeight = dotStep * 8
    	, wWidth = dotStep * 18
        
    svg.append("rect").classed("widget", true)
    	.attr("fill", "#0d1215")
    	.attr("height", 0)
    	.attr("width", wWidth)
    	.attr("x", (width / 2) - (wWidth / 2))
    	.attr("y", (height / 2) - (wHeight / 2))
    		.transition().duration(750).delay(2000)
    			.attr("height", wHeight)

</script>
</body>

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