<section id="radial-lines">
<h1>Radial Lines</h1>
<p>I mean I've seen this kind of thing before and I wanted to see if I could do it from scratch, as it were</p>
<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/radial-lines.js"></script>
<section id="radial-lines">
<h1>Radial Lines</h1>
<p>I mean I've seen this kind of thing before and I wanted to see if I could do it from scratch, as it were</p>
<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/radial-lines.js' }}"></script>
/* No context defined. */
(function () {
document.addEventListener('DOMContentLoaded', function () {
console.log("radial-lines active");
// line coordinate helper functions
const pi = Math.PI;
// function getXcoord(angle, length) {
// return Math.sqrt(Math.pow(length, 2) - Math.pow(Math.sin(angle * (pi/180)), 2));
// }
//
// function getYcoord(angle, length) {
// return Math.sqrt(Math.pow(length, 2) - Math.pow(Math.cos(angle * (pi/180)), 2));
// }
//
function getXcoord(angle, length) {
return length * Math.cos(angle * (pi/180));
}
function getYcoord(angle, length) {
return length * Math.sin(angle * (pi/180));
}
// config
const width = 1200;
const height = 800;
const margin = {
"top": 10,
"bottom": 10,
"left": 10,
"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
})
}
// main svg output
const svg = d3.select("#svgOutput")
.append("svg")
.attr("viewBox", [0, 0, width, height])
.attr("preserveAspectRatio", "xMidYMid meet");
// colorable background rectangle
svg.append('rect')
.attr('class', 'bg')
.attr('x', margin.left)
.attr('y', margin.top)
.attr('height', height - margin.bottom - margin.top)
.attr('width', width - margin.right - margin.left)
.attr('stroke', 'darkslategray')
.attr('stroke-width', '0.25')
.attr('fill', '#ffffff');
// scales
const lengthScale = d3.scaleLinear()
.domain([0, d3.max(datasetArray, (d) => d.count)])
.range([0, (height - margin.top - margin.bottom) / 2]);
const angleScale = d3.scaleLinear()
.domain([0, d3.max(datasetArray, (d) => d.id)])
.range([-90, 270]);
// establish the center of the chart
const centerX = (width - margin.left - margin.right) / 2 + margin.left;
const centerY = (height - margin.top - margin.bottom) / 2 + margin.top;
svg.append('circle')
.attr('cx', centerX)
.attr('cy', centerY)
.attr('r', '25')
.attr('stroke', 'navy')
.attr('fill', 'none');
// draw some lines, yeah!
svg.selectAll('line.datapt')
.data(datasetArray)
.enter()
.append('line')
.attr('class', 'datapt')
.attr('x1', centerX)
.attr('y1', centerY)
.attr('x2', (d, i) => {
return getXcoord(angleScale(d.id), lengthScale(d.count)) + centerX;
})
.attr('y2', (d, i) => {
return getYcoord(angleScale(d.id), lengthScale(d.count)) + centerY;
})
.attr('fill', 'none')
.attr('stroke', 'darkslategray')
.attr('stroke-width', '1.5')
.attr('stroke-opacity', '0.2');
// console.log(getXcoord(180, 1));
// console.log(getYcoord(180, 1));
console.log(getXcoord(180, 500));
console.log(getYcoord(180, 500));
//
// 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]);
//
//
// // 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 +')');
// })
});
})();
#radial-lines {
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;
}
.datapt:hover {
stroke-opacity: 1;
}
}
No notes defined.