d3.js transparent shape tesselations - complex sub

Question

Expanding on this first example. I am interested to expand the solutions.

1 - make this more responsive - scaling wise 2 - make the subtraction more complex 3 - ensure the svg fits over the width of the banner.

d3.js - masking shapes to create transparent sectio

So here is the goal

this is the code as it is - I've given it a little clean up. http://jsfiddle.net/NYEaX/1521/

function maskMaker(el) {

  var backcolor = $(el).data("color");
  var backopacity = $(el).data("opacity");

  // Set the main elements for the series chart
  var svgroot = d3.select($(el)[0]).append("svg");
  var mask = svgroot
    .append("defs")
    .append("mask")
    .attr("id", "myMask");

  mask.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", "1200px")
    .attr("height", 500)
    .style("fill", "white")
    .style("opacity", backopacity);

  mask.append("circle")
    .attr("cx", 550)
    .attr("cy", 250)
    .attr("r", 150);

  var svg = svgroot
    .attr("class", "series")
    .attr("width", "1200px")
    .attr("height", "500px")
    .append("g")
    .attr("transform", "translate(0,0)")

  var rect = svg
    .append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", "1200px")
    .attr("height", 500)
    .attr("mask", "url(#myMask)")
    .style("fill", backcolor);

}

//var el = $(".mask"); //selector

$('[data-role="mask"]').each(function(index) {
  console.log("test")
  maskMaker(this);
});