console.clear()

var width = 960, height = 500

var svg = d3.select('body').html('').append('svg').at({width, height})



var blueShape = 'M' + d3.range(10).map(d =>{
  return [Math.random()*width, Math.random()*height]
}).join('L')

var redShape = 'M' + d3.range(10).map(d =>{
  return [Math.random()*width, Math.random()*height]
}).join('L')


var defsSel = svg.append('defs')

defsSel.append('pattern')
  .at({id: 'blue', width: 3, height: 12})
  .attr('patternUnits', 'userSpaceOnUse')
  .attr('patternTransform', 'rotate(-45)')
  .append('rect')
  .at({width: 1, height: 12, fill: '#0ff'})

defsSel.append('pattern')
  .at({id: 'red', width: 3, height: 12})
  .attr('patternUnits', 'userSpaceOnUse')
  .attr('patternTransform', 'rotate(45)')
  .append('rect')
  .at({width: 1, height: 12, fill: '#f0f'})


defsSel.append('mask')
  .at({id: 'blue-mask'})
  .append('path')
  .at({d: blueShape})
  .st({strokeWidth: 30, fill: '#fff', stroke: '#fff'})

defsSel.append('mask')
  .at({id: 'red-mask'})
  .append('path')
  .at({d: redShape})
  .st({strokeWidth: 30, fill: '#fff', stroke: '#fff'})




svg.append('rect')
  .at({
    width, height, fill: 'url(#blue)',
  })
  .attr('mask', 'url(#blue-mask)')

svg.append('rect')
  .at({
    width, height, fill: 'url(#red)',
  })
  .attr('mask', 'url(#red-mask)')