<section id="area-chart-with-pattern-fill">
<h1>Area Chart with Pattern Fills</h1>
<p>just to see what these look like; also, worth noting the colors are baked into the (compiled?) svg patterns; alternate colors could be created separately as needed</p>
<div class="controls">
<select name="patternSelector" id="patternSelector">
<option value="circles-1">circles-1</option>
<option value="circles-2">circles-2</option>
<option value="circles-3">circles-3</option>
<option value="circles-4">circles-4</option>
<option value="circles-5">circles-5</option>
<option value="circles-6">circles-6</option>
<option value="circles-7">circles-7</option>
<option value="circles-8">circles-8</option>
<option value="circles-9">circles-9</option>
<option value="diagonal-stripe-1">diagonal-stripe-1</option>
<option value="diagonal-stripe-2">diagonal-stripe-2</option>
<option value="diagonal-stripe-3">diagonal-stripe-3</option>
<option value="diagonal-stripe-4">diagonal-stripe-4</option>
<option value="diagonal-stripe-5">diagonal-stripe-5</option>
<option value="diagonal-stripe-6">diagonal-stripe-6</option>
<option value="dots-1">dots-1</option>
<option value="dots-2">dots-2</option>
<option value="dots-3">dots-3</option>
<option value="dots-4">dots-4</option>
<option value="dots-5">dots-5</option>
<option value="dots-6">dots-6</option>
<option value="dots-7">dots-7</option>
<option value="dots-8">dots-8</option>
<option value="dots-9">dots-9</option>
<option value="horizontal-stripe-1">horizontal-stripe-1</option>
<option value="horizontal-stripe-2">horizontal-stripe-2</option>
<option value="horizontal-stripe-3">horizontal-stripe-3</option>
<option value="horizontal-stripe-4">horizontal-stripe-4</option>
<option value="horizontal-stripe-5">horizontal-stripe-5</option>
<option value="horizontal-stripe-6">horizontal-stripe-6</option>
<option value="horizontal-stripe-7">horizontal-stripe-7</option>
<option value="horizontal-stripe-8">horizontal-stripe-8</option>
<option value="horizontal-stripe-9">horizontal-stripe-9</option>
<option value="vertical-stripe-1">vertical-stripe-1</option>
<option value="vertical-stripe-2">vertical-stripe-2</option>
<option value="vertical-stripe-3">vertical-stripe-3</option>
<option value="vertical-stripe-4">vertical-stripe-4</option>
<option value="vertical-stripe-5">vertical-stripe-5</option>
<option value="vertical-stripe-6">vertical-stripe-6</option>
<option value="vertical-stripe-7">vertical-stripe-7</option>
<option value="vertical-stripe-8">vertical-stripe-8</option>
<option value="vertical-stripe-9">vertical-stripe-9</option>
<option value="crosshatch">crosshatch</option>
<option value="houndstooth">houndstooth</option>
<option value="lightstripe">lightstripe</option>
<option value="smalldot">smalldot</option>
<option value="subtle-patch">subtle-patch</option>
<option value="verticalstripe">verticalstripe</option>
<option value="whitecarbon">whitecarbon</option>
</select>
<button id="fillerButton">Fill it</button>
</div>
<div id="svgOutput"></div>
<div class="intro">
<p>(data is hidden inside a script tag right here)</p>
<script>
const dataset = [{
"id": 1,
"number": 13
},
{
"id": 2,
"number": -13
},
{
"id": 3,
"number": 6
},
{
"id": 4,
"number": -14
},
{
"id": 5,
"number": 11
},
{
"id": 6,
"number": -11
},
{
"id": 7,
"number": 14
},
{
"id": 8,
"number": 20
},
{
"id": 9,
"number": 17
},
{
"id": 10,
"number": 8
},
{
"id": 11,
"number": 7
},
{
"id": 12,
"number": 2
},
{
"id": 13,
"number": 4
},
{
"id": 14,
"number": -12
},
{
"id": 15,
"number": 14
},
{
"id": 16,
"number": 1
},
{
"id": 17,
"number": -4
},
{
"id": 18,
"number": 3
},
{
"id": 19,
"number": 4
},
{
"id": 20,
"number": 5
},
{
"id": 21,
"number": -6
},
{
"id": 22,
"number": -5
},
{
"id": 23,
"number": -9
},
{
"id": 24,
"number": 19
},
{
"id": 25,
"number": 6
},
{
"id": 26,
"number": -10
},
{
"id": 27,
"number": -10
},
{
"id": 28,
"number": 10
},
{
"id": 29,
"number": 2
},
{
"id": 30,
"number": 11
},
{
"id": 31,
"number": 11
},
{
"id": 32,
"number": 17
},
{
"id": 33,
"number": -10
},
{
"id": 34,
"number": 1
},
{
"id": 35,
"number": 3
},
{
"id": 36,
"number": -15
},
{
"id": 37,
"number": 20
},
{
"id": 38,
"number": 11
},
{
"id": 39,
"number": 0
},
{
"id": 40,
"number": 9
},
{
"id": 41,
"number": 18
},
{
"id": 42,
"number": 4
},
{
"id": 43,
"number": 6
},
{
"id": 44,
"number": 4
},
{
"id": 45,
"number": -15
},
{
"id": 46,
"number": 5
},
{
"id": 47,
"number": 0
},
{
"id": 48,
"number": -10
},
{
"id": 49,
"number": 8
},
{
"id": 50,
"number": 11
},
{
"id": 51,
"number": 19
},
{
"id": 52,
"number": 7
},
{
"id": 53,
"number": 7
},
{
"id": 54,
"number": 13
},
{
"id": 55,
"number": 3
},
{
"id": 56,
"number": 15
},
{
"id": 57,
"number": 10
},
{
"id": 58,
"number": -3
},
{
"id": 59,
"number": 7
},
{
"id": 60,
"number": -15
},
{
"id": 61,
"number": 7
},
{
"id": 62,
"number": 15
},
{
"id": 63,
"number": 9
},
{
"id": 64,
"number": -5
},
{
"id": 65,
"number": -9
},
{
"id": 66,
"number": 2
},
{
"id": 67,
"number": 11
},
{
"id": 68,
"number": 12
},
{
"id": 69,
"number": -4
},
{
"id": 70,
"number": -8
},
{
"id": 71,
"number": 8
},
{
"id": 72,
"number": 11
},
{
"id": 73,
"number": -14
},
{
"id": 74,
"number": -14
},
{
"id": 75,
"number": -9
},
{
"id": 76,
"number": 20
},
{
"id": 77,
"number": -11
},
{
"id": 78,
"number": 10
},
{
"id": 79,
"number": -12
},
{
"id": 80,
"number": -10
},
{
"id": 81,
"number": -9
},
{
"id": 82,
"number": -11
},
{
"id": 83,
"number": -6
},
{
"id": 84,
"number": 0
},
{
"id": 85,
"number": 7
},
{
"id": 86,
"number": 6
},
{
"id": 87,
"number": -9
},
{
"id": 88,
"number": -15
},
{
"id": 89,
"number": 5
},
{
"id": 90,
"number": 14
},
{
"id": 91,
"number": -4
},
{
"id": 92,
"number": 4
},
{
"id": 93,
"number": 12
},
{
"id": 94,
"number": 1
},
{
"id": 95,
"number": -9
},
{
"id": 96,
"number": 17
},
{
"id": 97,
"number": 16
},
{
"id": 98,
"number": 16
},
{
"id": 99,
"number": -7
},
{
"id": 100,
"number": 3
},
{
"id": 101,
"number": -3
},
{
"id": 102,
"number": 14
},
{
"id": 103,
"number": 4
},
{
"id": 104,
"number": 1
},
{
"id": 105,
"number": -9
},
{
"id": 106,
"number": -8
},
{
"id": 107,
"number": -13
},
{
"id": 108,
"number": -12
},
{
"id": 109,
"number": -13
},
{
"id": 110,
"number": 3
},
{
"id": 111,
"number": 11
},
{
"id": 112,
"number": 13
},
{
"id": 113,
"number": 11
},
{
"id": 114,
"number": 1
},
{
"id": 115,
"number": 1
},
{
"id": 116,
"number": -3
},
{
"id": 117,
"number": -14
},
{
"id": 118,
"number": 8
},
{
"id": 119,
"number": 16
},
{
"id": 120,
"number": 0
},
{
"id": 121,
"number": 19
},
{
"id": 122,
"number": 10
},
{
"id": 123,
"number": 4
},
{
"id": 124,
"number": 18
},
{
"id": 125,
"number": 15
},
{
"id": 126,
"number": -8
},
{
"id": 127,
"number": 7
},
{
"id": 128,
"number": -11
},
{
"id": 129,
"number": -15
},
{
"id": 130,
"number": 11
},
{
"id": 131,
"number": -7
},
{
"id": 132,
"number": 18
},
{
"id": 133,
"number": -9
},
{
"id": 134,
"number": 12
},
{
"id": 135,
"number": 8
},
{
"id": 136,
"number": -9
},
{
"id": 137,
"number": 15
},
{
"id": 138,
"number": -13
},
{
"id": 139,
"number": 19
},
{
"id": 140,
"number": 7
},
{
"id": 141,
"number": 17
},
{
"id": 142,
"number": -8
},
{
"id": 143,
"number": -8
},
{
"id": 144,
"number": 5
},
{
"id": 145,
"number": 12
},
{
"id": 146,
"number": 7
},
{
"id": 147,
"number": 12
},
{
"id": 148,
"number": 10
},
{
"id": 149,
"number": -3
},
{
"id": 150,
"number": 2
},
{
"id": 151,
"number": -12
},
{
"id": 152,
"number": -1
},
{
"id": 153,
"number": 12
},
{
"id": 154,
"number": 3
},
{
"id": 155,
"number": 14
},
{
"id": 156,
"number": 4
},
{
"id": 157,
"number": 12
},
{
"id": 158,
"number": -10
},
{
"id": 159,
"number": 16
},
{
"id": 160,
"number": -2
},
{
"id": 161,
"number": -3
},
{
"id": 162,
"number": -2
},
{
"id": 163,
"number": 2
},
{
"id": 164,
"number": -9
},
{
"id": 165,
"number": -7
},
{
"id": 166,
"number": -3
},
{
"id": 167,
"number": 0
},
{
"id": 168,
"number": 16
},
{
"id": 169,
"number": 15
},
{
"id": 170,
"number": -10
},
{
"id": 171,
"number": -4
},
{
"id": 172,
"number": -15
},
{
"id": 173,
"number": -14
},
{
"id": 174,
"number": -3
},
{
"id": 175,
"number": -14
},
{
"id": 176,
"number": -5
},
{
"id": 177,
"number": 8
},
{
"id": 178,
"number": 15
},
{
"id": 179,
"number": -15
},
{
"id": 180,
"number": -12
},
{
"id": 181,
"number": -13
},
{
"id": 182,
"number": 20
},
{
"id": 183,
"number": 6
},
{
"id": 184,
"number": 4
},
{
"id": 185,
"number": 10
},
{
"id": 186,
"number": 16
},
{
"id": 187,
"number": -4
},
{
"id": 188,
"number": -8
},
{
"id": 189,
"number": -14
},
{
"id": 190,
"number": -3
},
{
"id": 191,
"number": -1
},
{
"id": 192,
"number": 6
},
{
"id": 193,
"number": 6
},
{
"id": 194,
"number": -11
},
{
"id": 195,
"number": 5
},
{
"id": 196,
"number": 2
},
{
"id": 197,
"number": -4
},
{
"id": 198,
"number": -3
},
{
"id": 199,
"number": 14
},
{
"id": 200,
"number": -5
},
{
"id": 201,
"number": 6
},
{
"id": 202,
"number": 6
},
{
"id": 203,
"number": 3
},
{
"id": 204,
"number": -2
},
{
"id": 205,
"number": 11
},
{
"id": 206,
"number": -7
},
{
"id": 207,
"number": -2
},
{
"id": 208,
"number": 18
},
{
"id": 209,
"number": -9
},
{
"id": 210,
"number": 5
},
{
"id": 211,
"number": -7
},
{
"id": 212,
"number": 9
},
{
"id": 213,
"number": 0
},
{
"id": 214,
"number": 4
},
{
"id": 215,
"number": 0
},
{
"id": 216,
"number": 9
},
{
"id": 217,
"number": 5
},
{
"id": 218,
"number": 3
},
{
"id": 219,
"number": 12
},
{
"id": 220,
"number": 7
},
{
"id": 221,
"number": -14
},
{
"id": 222,
"number": 18
},
{
"id": 223,
"number": -8
},
{
"id": 224,
"number": -8
},
{
"id": 225,
"number": 17
},
{
"id": 226,
"number": 3
},
{
"id": 227,
"number": -7
},
{
"id": 228,
"number": 1
},
{
"id": 229,
"number": 15
},
{
"id": 230,
"number": -1
},
{
"id": 231,
"number": -15
},
{
"id": 232,
"number": 13
},
{
"id": 233,
"number": -7
},
{
"id": 234,
"number": 3
},
{
"id": 235,
"number": 18
},
{
"id": 236,
"number": 11
},
{
"id": 237,
"number": -2
},
{
"id": 238,
"number": 17
},
{
"id": 239,
"number": -2
},
{
"id": 240,
"number": 11
},
{
"id": 241,
"number": 6
},
{
"id": 242,
"number": 15
},
{
"id": 243,
"number": -9
},
{
"id": 244,
"number": 16
},
{
"id": 245,
"number": 12
},
{
"id": 246,
"number": -14
},
{
"id": 247,
"number": 11
},
{
"id": 248,
"number": 13
},
{
"id": 249,
"number": 1
},
{
"id": 250,
"number": 5
}
]
</script>
</div>
<div class="svgPatterns">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSIjMzQ4QTc4IiAvPgogIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSIjZmZmZmZmIi8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzEuNScgY3k9JzEuNScgcj0nMS41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzInIGN5PScyJyByPScyJyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzIuNScgY3k9JzIuNScgcj0nMi41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzMnIGN5PSczJyByPSczJyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzMuNScgY3k9JzMuNScgcj0nMy41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzQnIGN5PSc0JyByPSc0JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzQuNScgY3k9JzQuNScgcj0nNC41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzUnIGN5PSc1JyByPSc1JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4Jy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4Jy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScyJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4Jy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPSczJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzM0OEE3OCcgc3Ryb2tlLXdpZHRoPSczJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzM0OEE3OCcgc3Ryb2tlLXdpZHRoPScyJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzM0OEE3OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScyJyBoZWlnaHQ9JzInIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSczJyBoZWlnaHQ9JzMnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc2JyBoZWlnaHQ9JzYnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc3JyBoZWlnaHQ9JzcnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc5JyBoZWlnaHQ9JzknIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PScxJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PScyJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSczJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc0JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc1JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc2JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc3JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc4JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc5JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScyJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSczJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc0JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc1JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc2JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc3JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc4JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc5JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="8" width="8" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="crosshatch" patternUnits="userSpaceOnUse" width="8" height="8">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPgogIDxyZWN0IHdpZHRoPSc4JyBoZWlnaHQ9JzgnIGZpbGw9JyNmZmYnLz4KICA8cGF0aCBkPSdNMCAwTDggOFpNOCAwTDAgOFonIHN0cm9rZS13aWR0aD0nMC41JyBzdHJva2U9JyNhYWEnLz4KPC9zdmc+Cg==" x="0" y="0" width="8" height="8">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="houndstooth" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTAnIGhlaWdodD0nMTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+CiAgPHBhdGggZD0nTTAgMEw0IDQnIHN0cm9rZT0nI2FhYScgZmlsbD0nI2FhYScgc3Ryb2tlLXdpZHRoPScxJy8+CiAgPHBhdGggZD0nTTIuNSAwTDUgMi41TDUgNUw5IDlMNSA1TDEwIDVMMTAgMCcgc3Ryb2tlPScjYWFhJyBmaWxsPScjYWFhJyBzdHJva2Utd2lkdGg9JzEnLz4KICA8cGF0aCBkPSdNNSAxMEw1IDcuNUw3LjUgMTAnIHN0cm9rZT0nI2FhYScgZmlsbD0nI2FhYScgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="5" width="5" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="lightstripe" patternUnits="userSpaceOnUse" width="5" height="5">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9J3doaXRlJy8+CiAgPHBhdGggZD0nTTAgNUw1IDBaTTYgNEw0IDZaTS0xIDFMMSAtMVonIHN0cm9rZT0nIzg4OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==" x="0" y="0" width="5" height="5">
</image>
</pattern>
</defs>
</svg>
<svg height="5" width="5" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="smalldot" patternUnits="userSpaceOnUse" width="5" height="5">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgo8cmVjdCB3aWR0aD0nNScgaGVpZ2h0PSc1JyBmaWxsPScjZmZmJy8+CjxyZWN0IHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9JyNjY2MnLz4KPC9zdmc+" x="0" y="0" width="5" height="5">
</image>
</pattern>
</defs>
</svg>
<svg height="5" width="5" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="subtle-patch" patternUnits="userSpaceOnUse" width="5" height="5">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9JyMzNDhBNzgnIC8+CiAgPHJlY3QgeD0nMicgeT0nMicgd2lkdGg9JzEnIGhlaWdodD0nMScgZmlsbD0nI2ZmZmZmZicgLz4KPC9zdmc+" x="0" y="0" width="5" height="5">
</image>
</pattern>
</defs>
</svg>
<svg height="49" width="6" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="verticalstripe" patternUnits="userSpaceOnUse" width="6" height="49">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2JyBoZWlnaHQ9JzQ5Jz4KICA8cmVjdCB3aWR0aD0nMycgaGVpZ2h0PSc1MCcgZmlsbD0nI2ZmZicvPgogIDxyZWN0IHg9JzMnIHdpZHRoPScxJyBoZWlnaHQ9JzUwJyBmaWxsPScjY2NjJy8+Cjwvc3ZnPgo=" x="0" y="0" width="6" height="49">
</image>
</pattern>
</defs>
</svg>
<svg height="6" width="6" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="whitecarbon" patternUnits="userSpaceOnUse" width="6" height="6">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nNicgaGVpZ2h0PSc2Jz4KICA8cmVjdCB3aWR0aD0nNicgaGVpZ2h0PSc2JyBmaWxsPScjZWVlZWVlJy8+CiAgPGcgaWQ9J2MnPgogICAgPHJlY3Qgd2lkdGg9JzMnIGhlaWdodD0nMycgZmlsbD0nI2U2ZTZlNicvPgogICAgPHJlY3QgeT0nMScgd2lkdGg9JzMnIGhlaWdodD0nMicgZmlsbD0nI2Q4ZDhkOCcvPgogIDwvZz4KICA8dXNlIHhsaW5rOmhyZWY9JyNjJyB4PSczJyB5PSczJy8+Cjwvc3ZnPg==" x="0" y="0" width="6" height="6">
</image>
</pattern>
</defs>
</svg>
</div>
</section>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="../../js/components/area-chart-with-pattern-fill.js"></script>
<section id="area-chart-with-pattern-fill">
<h1>Area Chart with Pattern Fills</h1>
<p>just to see what these look like; also, worth noting the colors are baked into the (compiled?) svg patterns; alternate colors could be created separately as needed</p>
<div class="controls">
{{> @pattern-selector-element }}
<button id="fillerButton">Fill it</button>
</div>
<div id="svgOutput"></div>
<div class="intro">
<p>(data is hidden inside a script tag right here)</p>
<script>
const dataset = [{"id":1,"number":13},
{"id":2,"number":-13},
{"id":3,"number":6},
{"id":4,"number":-14},
{"id":5,"number":11},
{"id":6,"number":-11},
{"id":7,"number":14},
{"id":8,"number":20},
{"id":9,"number":17},
{"id":10,"number":8},
{"id":11,"number":7},
{"id":12,"number":2},
{"id":13,"number":4},
{"id":14,"number":-12},
{"id":15,"number":14},
{"id":16,"number":1},
{"id":17,"number":-4},
{"id":18,"number":3},
{"id":19,"number":4},
{"id":20,"number":5},
{"id":21,"number":-6},
{"id":22,"number":-5},
{"id":23,"number":-9},
{"id":24,"number":19},
{"id":25,"number":6},
{"id":26,"number":-10},
{"id":27,"number":-10},
{"id":28,"number":10},
{"id":29,"number":2},
{"id":30,"number":11},
{"id":31,"number":11},
{"id":32,"number":17},
{"id":33,"number":-10},
{"id":34,"number":1},
{"id":35,"number":3},
{"id":36,"number":-15},
{"id":37,"number":20},
{"id":38,"number":11},
{"id":39,"number":0},
{"id":40,"number":9},
{"id":41,"number":18},
{"id":42,"number":4},
{"id":43,"number":6},
{"id":44,"number":4},
{"id":45,"number":-15},
{"id":46,"number":5},
{"id":47,"number":0},
{"id":48,"number":-10},
{"id":49,"number":8},
{"id":50,"number":11},
{"id":51,"number":19},
{"id":52,"number":7},
{"id":53,"number":7},
{"id":54,"number":13},
{"id":55,"number":3},
{"id":56,"number":15},
{"id":57,"number":10},
{"id":58,"number":-3},
{"id":59,"number":7},
{"id":60,"number":-15},
{"id":61,"number":7},
{"id":62,"number":15},
{"id":63,"number":9},
{"id":64,"number":-5},
{"id":65,"number":-9},
{"id":66,"number":2},
{"id":67,"number":11},
{"id":68,"number":12},
{"id":69,"number":-4},
{"id":70,"number":-8},
{"id":71,"number":8},
{"id":72,"number":11},
{"id":73,"number":-14},
{"id":74,"number":-14},
{"id":75,"number":-9},
{"id":76,"number":20},
{"id":77,"number":-11},
{"id":78,"number":10},
{"id":79,"number":-12},
{"id":80,"number":-10},
{"id":81,"number":-9},
{"id":82,"number":-11},
{"id":83,"number":-6},
{"id":84,"number":0},
{"id":85,"number":7},
{"id":86,"number":6},
{"id":87,"number":-9},
{"id":88,"number":-15},
{"id":89,"number":5},
{"id":90,"number":14},
{"id":91,"number":-4},
{"id":92,"number":4},
{"id":93,"number":12},
{"id":94,"number":1},
{"id":95,"number":-9},
{"id":96,"number":17},
{"id":97,"number":16},
{"id":98,"number":16},
{"id":99,"number":-7},
{"id":100,"number":3},
{"id":101,"number":-3},
{"id":102,"number":14},
{"id":103,"number":4},
{"id":104,"number":1},
{"id":105,"number":-9},
{"id":106,"number":-8},
{"id":107,"number":-13},
{"id":108,"number":-12},
{"id":109,"number":-13},
{"id":110,"number":3},
{"id":111,"number":11},
{"id":112,"number":13},
{"id":113,"number":11},
{"id":114,"number":1},
{"id":115,"number":1},
{"id":116,"number":-3},
{"id":117,"number":-14},
{"id":118,"number":8},
{"id":119,"number":16},
{"id":120,"number":0},
{"id":121,"number":19},
{"id":122,"number":10},
{"id":123,"number":4},
{"id":124,"number":18},
{"id":125,"number":15},
{"id":126,"number":-8},
{"id":127,"number":7},
{"id":128,"number":-11},
{"id":129,"number":-15},
{"id":130,"number":11},
{"id":131,"number":-7},
{"id":132,"number":18},
{"id":133,"number":-9},
{"id":134,"number":12},
{"id":135,"number":8},
{"id":136,"number":-9},
{"id":137,"number":15},
{"id":138,"number":-13},
{"id":139,"number":19},
{"id":140,"number":7},
{"id":141,"number":17},
{"id":142,"number":-8},
{"id":143,"number":-8},
{"id":144,"number":5},
{"id":145,"number":12},
{"id":146,"number":7},
{"id":147,"number":12},
{"id":148,"number":10},
{"id":149,"number":-3},
{"id":150,"number":2},
{"id":151,"number":-12},
{"id":152,"number":-1},
{"id":153,"number":12},
{"id":154,"number":3},
{"id":155,"number":14},
{"id":156,"number":4},
{"id":157,"number":12},
{"id":158,"number":-10},
{"id":159,"number":16},
{"id":160,"number":-2},
{"id":161,"number":-3},
{"id":162,"number":-2},
{"id":163,"number":2},
{"id":164,"number":-9},
{"id":165,"number":-7},
{"id":166,"number":-3},
{"id":167,"number":0},
{"id":168,"number":16},
{"id":169,"number":15},
{"id":170,"number":-10},
{"id":171,"number":-4},
{"id":172,"number":-15},
{"id":173,"number":-14},
{"id":174,"number":-3},
{"id":175,"number":-14},
{"id":176,"number":-5},
{"id":177,"number":8},
{"id":178,"number":15},
{"id":179,"number":-15},
{"id":180,"number":-12},
{"id":181,"number":-13},
{"id":182,"number":20},
{"id":183,"number":6},
{"id":184,"number":4},
{"id":185,"number":10},
{"id":186,"number":16},
{"id":187,"number":-4},
{"id":188,"number":-8},
{"id":189,"number":-14},
{"id":190,"number":-3},
{"id":191,"number":-1},
{"id":192,"number":6},
{"id":193,"number":6},
{"id":194,"number":-11},
{"id":195,"number":5},
{"id":196,"number":2},
{"id":197,"number":-4},
{"id":198,"number":-3},
{"id":199,"number":14},
{"id":200,"number":-5},
{"id":201,"number":6},
{"id":202,"number":6},
{"id":203,"number":3},
{"id":204,"number":-2},
{"id":205,"number":11},
{"id":206,"number":-7},
{"id":207,"number":-2},
{"id":208,"number":18},
{"id":209,"number":-9},
{"id":210,"number":5},
{"id":211,"number":-7},
{"id":212,"number":9},
{"id":213,"number":0},
{"id":214,"number":4},
{"id":215,"number":0},
{"id":216,"number":9},
{"id":217,"number":5},
{"id":218,"number":3},
{"id":219,"number":12},
{"id":220,"number":7},
{"id":221,"number":-14},
{"id":222,"number":18},
{"id":223,"number":-8},
{"id":224,"number":-8},
{"id":225,"number":17},
{"id":226,"number":3},
{"id":227,"number":-7},
{"id":228,"number":1},
{"id":229,"number":15},
{"id":230,"number":-1},
{"id":231,"number":-15},
{"id":232,"number":13},
{"id":233,"number":-7},
{"id":234,"number":3},
{"id":235,"number":18},
{"id":236,"number":11},
{"id":237,"number":-2},
{"id":238,"number":17},
{"id":239,"number":-2},
{"id":240,"number":11},
{"id":241,"number":6},
{"id":242,"number":15},
{"id":243,"number":-9},
{"id":244,"number":16},
{"id":245,"number":12},
{"id":246,"number":-14},
{"id":247,"number":11},
{"id":248,"number":13},
{"id":249,"number":1},
{"id":250,"number":5}]
</script>
</div>
{{> @svg-patterns-green-and-white }}
</section>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="{{ path '/js/components/area-chart-with-pattern-fill.js' }}"></script>
/* No context defined. */
(function () {
document.addEventListener('DOMContentLoaded', function () {
console.log("area-chart-with-pattern-fill active");
// config
const width = 1000;
const height = 700;
const margin = {
"top": 20,
"bottom": 30,
"left": 40,
"right": 10
}
// data input and massaging
let datasetArray = [];
datasetArray.push({
id: 1,
count: 600 + dataset[0].number
})
for (let i = 1; i < dataset.length; i++) {
datasetArray.push({
id: dataset[i].id,
count: datasetArray[i - 1].count + dataset[i].number
})
}
// scales
const xScale = d3.scaleBand()
.domain(datasetArray.map(d => d.id))
.range([margin.left, width - margin.right])
.padding(0);
const yScale = d3.scaleLinear()
.domain(d3.extent(datasetArray, d => d.count))
.range([height - margin.bottom, margin.top]);
// svg output
const svg = d3.select("#svgOutput")
.append("svg")
.attr("viewBox", [0, 0, width, height])
.attr("preserveAspectRatio", "xMidYMid meet");
// create an area function and use it to draw an area chart
const area = d3.area()
.x(d => xScale(d.id))
.y0(height - margin.bottom)
.y1(d => yScale(d.count));
svg.append('path')
.attr('d', area(datasetArray))
.attr('fill', 'mediumvioletred')
.attr('class', 'area-fill');
// plot the points as basic circles
// svg.selectAll("circle.point")
// .data(datasetArray)
// .enter()
// .append('circle')
// .attr('class', 'point')
// .attr('cx', (d) => xScale(d.id))
// .attr("cy", (d) => yScale(d.count))
// .attr("r", () => xScale.bandwidth() / 2)
// .attr("fill", "white")
// .attr("stroke", "magenta")
// .attr("stroke-width", "1.5")
// .append('title')
// .text((d) => `id: ${d.id} / count: ${d.count}`);
// axes
const xAxis = d3.axisBottom(xScale)
.tickValues(xScale.domain().filter(function (d, i) {
return !(i % 10)
}));
const yAxis = d3.axisLeft(yScale);
svg.append("g")
.attr("transform", "translate(" + margin.left + ", 0)")
.call(yAxis);
svg.append("g")
.attr("transform", "translate(0, " + (height - margin.bottom) + ")")
.call(xAxis);
// let us make it do a trick
const fillerButton = document.querySelector('#fillerButton');
fillerButton.addEventListener('click', function() {
console.log("fill me up, buttercup");
const newPattern = patternSelector.value;
d3.select('svg')
.selectAll('path.area-fill')
.style('fill', 'url(#' + newPattern +')');
})
});
})();
#area-chart-with-pattern-fill {
padding: 1rem;
margin: 1rem;
border: 2px dotted fuchsia;
background-color: gainsboro;
font-family: Verdana, sans-serif;
svg {
background-color: aliceblue;
}
.controls {
margin-bottom: 2rem;
}
// just trying to hide these from view
.svgPatterns {
height: 0;
width: 0;
overflow: hidden;
}
}
No notes defined.