SVG 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%; }
    </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>

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