D3 Examples - SVG 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%; }
    </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 + ")");
      // Pattern definition
      const defs = svg.append('defs')
        .append('pattern')
        .attr('id', 'some-pattern')
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('width', 10)
        .attr('height', 10)
        .append('image')
            .attr('xlink:href', 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nOScgaGVpZ2h0PScxMCcgZmlsbD0nYmxhY2snIC8+Cjwvc3ZnPg==')
            .attr('x', 0)
            .attr('y', 0)
            .attr('width', 10)
            .attr('height', 10)
      // Pattern use
      svg.append('rect')
        .attr('height', 100)
        .attr('width', 100)
        .attr('x', 0)
        .attr('y', 0)
        .style('stroke', 'black')
        .style('fill', 'url(#some-pattern)');
    </script>
  </body>
  
    