stroke-pattern-fill by 1wheel

A mask lets you use the same pattern for stroke and fill without a banding effect.

Used in The Word Choices That Explain Why Jane Austen Endures.

script.js

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)')

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{
	margin: 0px;
	font-family: Consolas, Andale Mono, Menlo, Monaco, monospace;
}

text{
	fill: #fff;
	font-size: 16px;
	font-weight: 300;
}

h3{
	margin: 0px;
	margin-top: 10px;
}

</style>

<body>

<div id='graph'></div>

<div class='tooltip'></div>


</body>

<script src="d3v4.js"></script>
<script src="lodash.js"></script>
<script src="hex-bin.js"></script>


<script src='script.js'></script>