Random pattern fills

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      svg { width: 100%; height: 100%; }
      .pattern {
        stroke: black;
      }
    </style>
  </head>

<body>
    <script>
      "use strict";
      const margin = {top: 20, right: 10, bottom: 20, left: 10};
      const width = 960 - margin.left - margin.right;
      const height = 500 - margin.top - margin.bottom;
      const svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
			const nPatterns = Math.floor(Math.random()*10 + 8);
      const defs = svg.append('defs');
      
      let random = limit => Math.floor(Math.random()*limit);
      let patterns = d3.range(nPatterns);
      
      // Create random patterns
      patterns.forEach((d, i) => {
      	defs.append('pattern')
       		.attr('id', 'pattern' + i)
        	.attr('x', 0)
        	.attr('y', 0)
        	.attr('width', '0.25')
        	.attr('height', '0.25')
        	.attr('patternUnits', 'objectBoundingBox')
        		.append('path')
        		.attr('d', 'M0,0' + ' L' + random(64) + ',' + random(64))
        		.style('stroke', 'black')
        		.style('fill', 'none');
      });
      
      let rects = svg.append('g')
      	.attr('class', 'patterns')
      	.selectAll('.pattern')
      	.data(patterns)
      	.enter();
      
      rects.append('rect')
      	.attr('class', 'pattern')
      	.attr('x', (d, i) => (i%4)*64 + 10)
      	.attr('y', (d,i) => Math.floor(i/4)*64 + 10)
      	.attr('width', 64)
      	.attr('height', 64)
      	.style('fill', (d,i) => 'url(#pattern' + i + ')');
    </script>
  </body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js