0

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 enter image description here

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);
});
Community
  • 1
  • 1
The Old County
  • 89
  • 13
  • 59
  • 129
  • well to make it more responsive you can calculate with and height and on window resize redraw/calculate everything – Rudi Urbanek Sep 08 '16 at 00:23
  • @RudiUrbanek wouldn't that be a bit slow though -- I do recall there being some scaling features -- its inside a div that will change width naturally - and so maybe even the masking may have to adapt - if scaling isn't enough? -- I'd like to try and get the masking more complex first -- and if anyone knows how to get the color to be more like a photoshop multiply then just an opacity change – The Old County Sep 08 '16 at 00:25
  • http://jsfiddle.net/59bunh8u/43/ -- I've started getting rotated squares going on – The Old County Sep 08 '16 at 00:51
  • -- this is stating to tessellate - but I think the rotation here makes it much harder to plot - http://jsfiddle.net/NYEaX/1522/ – The Old County Sep 08 '16 at 05:55
  • ---I've started to try and get it to loop -- but I am not sure the logic is sound for these tessellations - architect coordinates? http://jsfiddle.net/NYEaX/1523/ – The Old County Sep 08 '16 at 06:11

0 Answers0