/* get a D3 reference of the SVG
*/

(function() {
  var A, B, defs, hatches, new_patterns, svg, vis;

  svg = d3.select('svg');

  vis = svg.append('g').attr('transform', 'translate(290,50)');

  /* define two colors
  */

  A = '#ea9679';

  B = '#00bbdd';

  /* create hatch patterns
  */

  hatches = [
    {
      size: 40,
      c1: A,
      c2: B,
      id: 'one'
    }
  ];

  defs = svg.append('defs');

  new_patterns = defs.selectAll('.hatch').data(hatches).enter().append('pattern').attr('class', 'hatch').attr('id', function(d) {
    return d.id;
  }).attr('patternUnits', 'userSpaceOnUse').attr('width', function(d) {
    return d.size;
  }).attr('height', function(d) {
    return d.size;
  });

  new_patterns.append('rect').attr('x', 0).attr('y', 0).attr('width', function(d) {
    return d.size;
  }).attr('height', function(d) {
    return d.size;
  }).attr('fill', function(d) {
    return d.c1;
  });

  new_patterns.append('path').attr('d', function(d) {
    return "M0 " + d.size + " l" + d.size + " " + (-d.size) + "\nM" + (-d.size) + " " + d.size + " L" + d.size + " " + (-d.size) + "\nM" + (2 * d.size) + " 0 L0 " + (2 * d.size);
  }).attr('stroke-width', function(d) {
    return d.size / 3;
  }).attr('stroke', function(d) {
    return d.c2;
  });

  /* create a fake intersection of two squares
  */

  vis.append('path').attr('d', 'M0 0 l300 0 l0 100 l-200 0 l0 200 l-100 0 z').attr('fill', A);

  vis.append('path').attr('d', 'M300 100 l100 0 l0 300 l-300 0 l0 -100 l200 0 z').attr('fill', B);

  vis.append('rect').attr('x', 100).attr('y', 100).attr('width', 200).attr('height', 200).attr('fill', 'url(#one)');

}).call(this);