Pattern Fills

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
<svg height='700'>
 	<defs> 
    <pattern id="crosshatch" patternUnits="userSpaceOnUse" width="6" height="6">
    		<rect width='6' height='6' fill='#fff'/>
  			<path d='M0 0L6 6ZM6 0L0 6Z' stroke-width='0.5' stroke='#aaa'/>
    </pattern>
    <pattern id="diagonal-green" patternUnits="userSpaceOnUse" width="10" height="10">
    <rect width='10' height='10' fill='white'/>
  <path d='M-1,1 l2,-2
           M0,10 l10,-10
           M9,11 l2,-2' stroke='green' stroke-width='2'/>
    </pattern>
    <pattern id="diagonal-red" patternUnits="userSpaceOnUse" width="10" height="10">
    <rect width='10' height='10' fill='white'/>
  <path d='M-1,1 l2,-2
           M0,10 l10,-10
           M9,11 l2,-2' stroke='red' stroke-width='4'/>
    </pattern>
    <pattern id="vertical-stripe-green" patternUnits="userSpaceOnUse" width="10" height="10">
  		<rect width='8' height='10' fill='green' />
  		<rect x='8' y='0' width='10' height='1' fill='white' />
   </pattern>    
    <pattern id="vertical-stripe-black" patternUnits="userSpaceOnUse" width="10" height="10">
  		<rect width='2' height='10' fill='black' />
  		<rect x='2' y='0' width='10' height='1' fill='white' />
   </pattern>    
    <pattern id="horizontal-stripe-black" patternUnits="userSpaceOnUse" width="10" height="10">
  		<rect width='10' height='10' fill='black' />
  		<rect x='0' y='0' width='10' height='1' fill='white' />
   </pattern>    
    <pattern id="horizontal-stripe-purple" patternUnits="userSpaceOnUse" width="10" height="10">
  		<rect width='10' height='10' fill='purple' />
  		<rect x='0' y='0' width='10' height='5' fill='white' />
   </pattern>
    <pattern id="horizontal-stripe-red" patternUnits="userSpaceOnUse" width="10" height="10">
  		<rect width='10' height='10' fill='red' />
  		<rect x='0' y='0' width='10' height='5' fill='darkred' />
   </pattern>
   	<pattern id="vertical-stripe-blue" patternUnits="userSpaceOnUse" width="10" height="10">
  		<rect width='5' height='10' fill='rgb(0,80,160)' />
  		<rect x='5' y='0' width='5' height='10' fill='white' />
   	</pattern>
   	<pattern id="quartercircles-blue" x="0" y="10" width="5" height="5" patternUnits="userSpaceOnUse" >
      <circle cx="5" cy="5" r="4.5" style="stroke: none; fill: rgb(0,80,160)" />
		</pattern>
   	<pattern id="quartercircles-purple" x="0" y="10" width="5" height="5" patternUnits="userSpaceOnUse" >
      <circle cx="5" cy="5" r="4.5" style="stroke: none; fill: purple" />
		</pattern>
  </defs> 
  <circle cx='50' cy='50' fill="url(#horizontal-stripe-red)" r='20' stroke='black'></circle>
  <circle cx='50' cy='100' fill="url(#quartercircles-blue)" r='20' stroke='black'></circle>
  <circle cx='50' cy='150' fill="url(#vertical-stripe-blue)" r='20' stroke='black'></circle>
  <circle cx='50' cy='200' fill="url(#quartercircles-purple)" r='20' stroke='black'></circle>
  <circle cx='50' cy='250' fill="url(#horizontal-stripe-purple)" r='20' stroke='black'></circle>
  <circle cx='50' cy='250' fill="url(#horizontal-stripe-purple)" r='20' stroke='black'></circle>
  <circle cx='50' cy='300' fill="url(#horizontal-stripe-black)" r='20' stroke='black'></circle>
  <circle cx='50' cy='350' fill="url(#vertical-stripe-black)" r='20' stroke='black'></circle>
  <circle cx='50' cy='400' fill="url(#vertical-stripe-green)" r='20' stroke='black'></circle>
  <circle cx='50' cy='500' fill="url(#diagonal-red)" r='20' stroke='black'></circle>
  <circle cx='50' cy='450' fill="url(#diagonal-green)" r='20' stroke='black'></circle>
  <circle cx='50' cy='550' fill="url(#crosshatch)" r='20' stroke='black'></circle>
</svg>
<body>
  <script>
    
    d3.selectAll('circle').style('fill-opacity',.5)
    
    var str = new XMLSerializer().serializeToString(d3.select('#horizontal-stripe-5').node());
    var encoded = window.btoa(str)
		console.log(str, encoded)     
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")

</script>
</body>

https://d3js.org/d3.v4.min.js