svg w image background

forked from noblemillie's block: svg w image background

<!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; }
    svg { width:100%; height: 100% }
    rect, circle { stroke-width: 10; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg"),
        defs = svg.append("defs")
    		size = 150
        rects = [1, 3, 4, 6],
    		circles = [7, 8, 9, 10];
    
    var color = d3.scaleOrdinal(d3.schemeCategory10);
    
    var img_id = function(d){ return "img_" + d; }
    var img_url = function(d){ return "url(#img_" + d + ")"; }
    
    // create an svg element
    var imgPattern = defs.selectAll("pattern").data(d3.merge([rects, circles]))
    	.enter()
    .append("pattern")
        .attr("id", img_id)
        .attr("width", 1)
        .attr("height", 1)
        .attr("patternUnits", "objectBoundingBox")
    	.append("image")
    		.attr("x", 0)
    		.attr("y", 0)
    		.attr("width", size)
        .attr("height", size)
        .attr("xlink:href", function(d) {
          return "https://lorempixel.com/" + size + "/" + size + "/people/" + d;
        })
    
    svg.selectAll("rect").data(rects)
      .enter().append("rect")
        .attr("x", function(d, i){ return i * size * 1.5 + (0.5 * size)})
      	.attr("y", function(d, i){ return i % 2 ? 325 : 100; })
        .attr("height", size)
        .attr("width", size)
        .style("fill", img_url)
    		.style("stroke", color)
    
    svg.selectAll("circle").data(circles)
      .enter().append("circle")
    		.attr("cx", function(d, i){ return i * size * 1.5 + size; })
      	.attr("cy", function(d, i){ return i % 2 ? 175 : 400; })
    		.attr("r", size / 2)
        .style("fill", img_url)
    		.style("stroke", color)
    
  </script>
</body>

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