D3 Examples - Random pattern fills

xxxxxxxxxx
 
<!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>
  
    