The avatar for @oliviafvane
Olivia Vane
Data visualisation design + code. Interactive data journalist @TheEconomist
Published
Edited
Apr 5, 2020
Fork of How to use Textures / Patterns in Vega-Lite
10 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = [{name:'Houndstooth', value: 12, category: 'A'},
{name:'Stuart', value: 8, category: 'B'},
{name:'Gearach Woodcock Tweed', value: 5, category: 'C'},
{name:'Gift of Life Michigan', value: 10, category: 'D'},
{name:'Black Watch', value: 8, category: 'E'},
{name:'Prince of Wales Check', value: 17, category: 'F'},
{name:'Burberry', value: 9, category: 'G'},
{name:'Tartan', value: 10, category: 'H'}]
Insert cell
pattern_scale = ({
domain: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
range: ['url(#houndstooth)', 'url(#Stuart)', 'url(#tweed)','url(#michigan)', 'url(#blackWatch)', 'url(#POW)', 'url(#Burberry)', 'url(#tartan)']
});
Insert cell
Insert cell
vl.markBar({size: 45})
.data(data)
.encode(
vl.y().fieldN("name"),
vl.x().fieldQ("value"),
vl.fill().fieldN("category").scale(pattern_scale)
)
.height(400)
.render({renderer: 'svg'}) // Make sure you're rendering an svg (not the default, canvas) or it won't work
Insert cell
Insert cell
html `

<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>

<!-- From https://observablehq.com/@stroked/houndstooth?collection=@stroked/patterning -->

<pattern id="houndstooth" patternUnits="userSpaceOnUse" width="8" height="8">
<polygon points="0,0, 4,0, 8,4, 6,4, 4,2, 4,4, 2,4, 4,6, 4,8, 0,4, 0,0" />
<polygon points="8,0, 8,2, 6,0, 8, 0" style="fill:black;stroke:none;"/>
<polygon points="0,8, 2,8, 0,6, 0, 8" style="fill:black;stroke:none;"/>
</pattern>

<!-- From https://tartanify.com/ -->

<pattern id="tartan" patternUnits="userSpaceOnUse" width="40" height="40"> <image xlink:href="data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%20280%20280%22%20width%3D%22280%22%20height%3D%22280%22%20x%3D%220%22%20y%3D%220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22diagonalStripes%22%20x%3D%220%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpolygon%20points%3D%220%2C4%200%2C8%208%2C0%204%2C0%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpolygon%3E%3Cpolygon%20points%3D%224%2C8%208%2C8%208%2C4%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpolygon%3E%3C%2Fpattern%3E%3Cmask%20id%3D%22grating%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23diagonalStripes)%22%3E%3C%2Frect%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20id%3D%22horizStripes%22%3E%3Crect%20fill%3D%22%23FF8A00%22%20height%3D%2240%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E52E71%22%20height%3D%2210%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2240%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%2210%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2250%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E52E71%22%20height%3D%2270%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2260%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23100e17%22%20height%3D%2220%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22130%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E52E71%22%20height%3D%2270%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22150%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%2210%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E52E71%22%20height%3D%2210%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22230%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FF8A00%22%20height%3D%2240%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22240%22%3E%3C%2Frect%3E%3C%2Fg%3E%3Cg%20id%3D%22vertStripes%22%20mask%3D%22url(%23grating)%22%3E%3Crect%20fill%3D%22%23FF8A00%22%20height%3D%22100%25%22%20width%3D%2240%22%20x%3D%220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E52E71%22%20height%3D%22100%25%22%20width%3D%2210%22%20x%3D%2240%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%22100%25%22%20width%3D%2210%22%20x%3D%2250%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E52E71%22%20height%3D%22100%25%22%20width%3D%2270%22%20x%3D%2260%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23100e17%22%20height%3D%22100%25%22%20width%3D%2220%22%20x%3D%22130%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E52E71%22%20height%3D%22100%25%22%20width%3D%2270%22%20x%3D%22150%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%22100%25%22%20width%3D%2210%22%20x%3D%22220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E52E71%22%20height%3D%22100%25%22%20width%3D%2210%22%20x%3D%22230%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FF8A00%22%20height%3D%22100%25%22%20width%3D%2240%22%20x%3D%22240%22%20y%3D%220%22%3E%3C%2Frect%3E%3C%2Fg%3E%3C%2Fsvg%3E" x="0" y="0" width="40" height="40"> </image> </pattern>

<!-- https://tartanify.com/tartan/gearach-woodcock-tweed -->
<pattern id="tweed" patternUnits="userSpaceOnUse" width="20" height="20"> <image xlink:href="data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2040%2040%22%20width%3D%2240%22%20height%3D%2240%22%20x%3D%220%22%20y%3D%220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22pattern%22%20x%3D%220%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpolygon%20points%3D%220%2C4%200%2C8%208%2C0%204%2C0%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpolygon%3E%3Cpolygon%20points%3D%224%2C8%208%2C8%208%2C4%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpolygon%3E%3C%2Fpattern%3E%3Cmask%20id%3D%22grating%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23pattern)%22%3E%3C%2Frect%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20id%3D%22horizStripes%22%3E%3Crect%20fill%3D%22%23D87C00%22%20height%3D%224%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%235C8CA8%22%20height%3D%224%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%224%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23604000%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%228%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%235C8CA8%22%20height%3D%224%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2216%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23D87C00%22%20height%3D%224%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%235C8CA8%22%20height%3D%224%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2224%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23604000%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2228%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%235C8CA8%22%20height%3D%224%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2236%22%3E%3C%2Frect%3E%3C%2Fg%3E%3Cg%20id%3D%22vertStripes%22%20mask%3D%22url(%23grating)%22%3E%3Crect%20fill%3D%22%23D87C00%22%20height%3D%22100%25%22%20width%3D%224%22%20x%3D%220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%235C8CA8%22%20height%3D%22100%25%22%20width%3D%224%22%20x%3D%224%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23604000%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%228%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%235C8CA8%22%20height%3D%22100%25%22%20width%3D%224%22%20x%3D%2216%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23D87C00%22%20height%3D%22100%25%22%20width%3D%224%22%20x%3D%2220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%235C8CA8%22%20height%3D%22100%25%22%20width%3D%224%22%20x%3D%2224%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23604000%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%2228%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%235C8CA8%22%20height%3D%22100%25%22%20width%3D%224%22%20x%3D%2236%22%20y%3D%220%22%3E%3C%2Frect%3E%3C%2Fg%3E%3C%2Fsvg%3E" x="0" y="0" width="20" height="20"> </image>
</pattern>

<!-- Gift of Life Michigan tartan https://www.tartanregister.gov.uk/tartanDetails?ref=10354 -->
<pattern id="michigan" patternUnits="userSpaceOnUse" width="30" height="30"> <image xlink:href="data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%20504%20504%22%20width%3D%22504%22%20height%3D%22504%22%20x%3D%220%22%20y%3D%220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22pattern%22%20x%3D%220%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpolygon%20points%3D%220%2C4%200%2C8%208%2C0%204%2C0%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpolygon%3E%3Cpolygon%20points%3D%224%2C8%208%2C8%208%2C4%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpolygon%3E%3C%2Fpattern%3E%3Cmask%20id%3D%22grating%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23pattern)%22%3E%3C%2Frect%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20id%3D%22horizStripes%22%3E%3Crect%20fill%3D%22%23FF0000%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%2382CFFD%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2216%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FF0000%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2224%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%2382CFFD%22%20height%3D%2288%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2232%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%2386C67C%22%20height%3D%22128%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22120%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23006400%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22248%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22256%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23006400%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22264%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%2386C67C%22%20height%3D%22128%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22272%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%2382CFFD%22%20height%3D%2288%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22400%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FF0000%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22488%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%2382CFFD%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22496%22%3E%3C%2Frect%3E%3C%2Fg%3E%3Cg%20id%3D%22vertStripes%22%20mask%3D%22url(%23grating)%22%3E%3Crect%20fill%3D%22%23FF0000%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%2382CFFD%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%2216%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FF0000%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%2224%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%2382CFFD%22%20height%3D%22100%25%22%20width%3D%2288%22%20x%3D%2232%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%2386C67C%22%20height%3D%22100%25%22%20width%3D%22128%22%20x%3D%22120%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23006400%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22248%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22256%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23006400%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22264%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%2386C67C%22%20height%3D%22100%25%22%20width%3D%22128%22%20x%3D%22272%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%2382CFFD%22%20height%3D%22100%25%22%20width%3D%2288%22%20x%3D%22400%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FF0000%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22488%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%2382CFFD%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22496%22%20y%3D%220%22%3E%3C%2Frect%3E%3C%2Fg%3E%3C%2Fsvg%3E" x="0" y="0" width="30" height="30"> </image>
</pattern>

<!-- https://tartanify.com/tartan/black-watch-dress-asymmetrical -->
<pattern id="blackWatch" patternUnits="userSpaceOnUse" width="80" height="80"> <image xlink:href="data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%20928%20928%22%20width%3D%22928%22%20height%3D%22928%22%20x%3D%220%22%20y%3D%220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22pattern%22%20x%3D%220%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpolygon%20points%3D%220%2C4%200%2C8%208%2C0%204%2C0%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpolygon%3E%3Cpolygon%20points%3D%224%2C8%208%2C8%208%2C4%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpolygon%3E%3C%2Fpattern%3E%3Cmask%20id%3D%22grating%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23pattern)%22%3E%3C%2Frect%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20id%3D%22horizStripes%22%3E%3Crect%20fill%3D%22%23202060%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2216%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23202060%22%20height%3D%2248%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2232%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%2248%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2280%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23006818%22%20height%3D%2264%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22128%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22192%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23006818%22%20height%3D%2264%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22208%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%2248%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22272%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22320%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23202060%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22336%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%2296%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22352%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23202060%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22448%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22464%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23202060%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22480%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%2296%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22496%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23202060%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22592%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22608%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%2248%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22624%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23006818%22%20height%3D%2264%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22672%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22736%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23006818%22%20height%3D%2264%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22752%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%2248%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22816%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23202060%22%20height%3D%2248%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22864%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22912%22%3E%3C%2Frect%3E%3C%2Fg%3E%3Cg%20id%3D%22vertStripes%22%20mask%3D%22url(%23grating)%22%3E%3Crect%20fill%3D%22%23202060%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%2216%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23202060%22%20height%3D%22100%25%22%20width%3D%2248%22%20x%3D%2232%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%22100%25%22%20width%3D%2248%22%20x%3D%2280%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23006818%22%20height%3D%22100%25%22%20width%3D%2264%22%20x%3D%22128%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22192%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23006818%22%20height%3D%22100%25%22%20width%3D%2264%22%20x%3D%22208%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%22100%25%22%20width%3D%2248%22%20x%3D%22272%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22320%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23202060%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22336%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%22100%25%22%20width%3D%2296%22%20x%3D%22352%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23202060%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22448%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22464%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23202060%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22480%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%22100%25%22%20width%3D%2296%22%20x%3D%22496%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23202060%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22592%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23FFFFFF%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22608%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%22100%25%22%20width%3D%2248%22%20x%3D%22624%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23006818%22%20height%3D%22100%25%22%20width%3D%2264%22%20x%3D%22672%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22736%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23006818%22%20height%3D%22100%25%22%20width%3D%2264%22%20x%3D%22752%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%22100%25%22%20width%3D%2248%22%20x%3D%22816%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23202060%22%20height%3D%22100%25%22%20width%3D%2248%22%20x%3D%22864%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23000000%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22912%22%20y%3D%220%22%3E%3C%2Frect%3E%3C%2Fg%3E%3C%2Fsvg%3E" x="0" y="0" width="80" height="80"> </image>
</pattern>

<!-- Prince of Wales check -->
<pattern id="POW" patternUnits="userSpaceOnUse" width="80" height="80"> <image xlink:href="data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%20912%20912%22%20width%3D%22912%22%20height%3D%22912%22%20x%3D%220%22%20y%3D%220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22pattern%22%20x%3D%220%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpolygon%20points%3D%220%2C4%200%2C8%208%2C0%204%2C0%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpolygon%3E%3Cpolygon%20points%3D%224%2C8%208%2C8%208%2C4%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpolygon%3E%3C%2Fpattern%3E%3Cmask%20id%3D%22grating%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23pattern)%22%3E%3C%2Frect%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20id%3D%22horizStripes%22%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2232%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2264%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2296%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22128%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23003C64%22%20height%3D%2264%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22160%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22224%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22256%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22272%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22288%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22304%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22320%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22336%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22352%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22368%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22384%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22400%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22416%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22432%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22448%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22464%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22480%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22496%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22512%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22528%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22544%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22560%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22576%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22592%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22608%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22624%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22640%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22656%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22672%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22688%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23003C64%22%20height%3D%2264%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22720%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22784%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22816%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22848%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22880%22%3E%3C%2Frect%3E%3C%2Fg%3E%3Cg%20id%3D%22vertStripes%22%20mask%3D%22url(%23grating)%22%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%2232%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%2264%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%2296%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%22128%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23003C64%22%20height%3D%22100%25%22%20width%3D%2264%22%20x%3D%22160%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%22224%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22256%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22272%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22288%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22304%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22320%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22336%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22352%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22368%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22384%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22400%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22416%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22432%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22448%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22464%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22480%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22496%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22512%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22528%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22544%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22560%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22576%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22592%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22608%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22624%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22640%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22656%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%22672%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%22688%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23003C64%22%20height%3D%22100%25%22%20width%3D%2264%22%20x%3D%22720%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%22784%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%22816%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C0C0C0%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%22848%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23441800%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%22880%22%20y%3D%220%22%3E%3C%2Frect%3E%3C%2Fg%3E%3C%2Fsvg%3E" x="0" y="0" width="80" height="80"></image>
</pattern>

<!-- https://tartanify.com/tartan/burberry-genuine -->
<pattern id="Burberry" patternUnits="userSpaceOnUse" width="80" height="80"> <image xlink:href="data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%20864%20864%22%20width%3D%22864%22%20height%3D%22864%22%20x%3D%220%22%20y%3D%220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22pattern%22%20x%3D%220%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpolygon%20points%3D%220%2C4%200%2C8%208%2C0%204%2C0%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpolygon%3E%3Cpolygon%20points%3D%224%2C8%208%2C8%208%2C4%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpolygon%3E%3C%2Fpattern%3E%3Cmask%20id%3D%22grating%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23pattern)%22%3E%3C%2Frect%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20id%3D%22horizStripes%22%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%2272%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23F8F4D0%22%20height%3D%2272%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2272%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%2272%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22144%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23B8A47C%22%20height%3D%22240%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22216%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C80000%22%20height%3D%2224%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22456%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23B8A47C%22%20height%3D%22240%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22480%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%2272%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22720%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23F8F4D0%22%20height%3D%2272%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22792%22%3E%3C%2Frect%3E%3C%2Fg%3E%3Cg%20id%3D%22vertStripes%22%20mask%3D%22url(%23grating)%22%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%22100%25%22%20width%3D%2272%22%20x%3D%220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23F8F4D0%22%20height%3D%22100%25%22%20width%3D%2272%22%20x%3D%2272%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%22100%25%22%20width%3D%2272%22%20x%3D%22144%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23B8A47C%22%20height%3D%22100%25%22%20width%3D%22240%22%20x%3D%22216%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23C80000%22%20height%3D%22100%25%22%20width%3D%2224%22%20x%3D%22456%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23B8A47C%22%20height%3D%22100%25%22%20width%3D%22240%22%20x%3D%22480%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%22100%25%22%20width%3D%2272%22%20x%3D%22720%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23F8F4D0%22%20height%3D%22100%25%22%20width%3D%2272%22%20x%3D%22792%22%20y%3D%220%22%3E%3C%2Frect%3E%3C%2Fg%3E%3C%2Fsvg%3E" x="0" y="0" width="80" height="80"></image>
</pattern>

<!-- https://tartanify.com/tartan/stuart-stewart -->
<pattern id="Stuart" patternUnits="userSpaceOnUse" width="80" height="80"> <image xlink:href="data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%201048%201048%22%20width%3D%221048%22%20height%3D%221048%22%20x%3D%220%22%20y%3D%220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22pattern%22%20x%3D%220%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpolygon%20points%3D%220%2C4%200%2C8%208%2C0%204%2C0%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpolygon%3E%3Cpolygon%20points%3D%224%2C8%208%2C8%208%2C4%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpolygon%3E%3C%2Fpattern%3E%3Cmask%20id%3D%22grating%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23pattern)%22%3E%3C%2Frect%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20id%3D%22horizStripes%22%3E%3Crect%20fill%3D%22%23005020%22%20height%3D%2216%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%22240%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%2216%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%232C4084%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22256%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22288%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%2248%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22320%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E8C000%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22368%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22376%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E0E0E0%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22384%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22392%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23005020%22%20height%3D%2280%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22400%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22480%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22512%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22520%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E0E0E0%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22528%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22536%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22544%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22552%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23005020%22%20height%3D%2280%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22584%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22664%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E0E0E0%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22672%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22680%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E8C000%22%20height%3D%228%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22688%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%2248%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22696%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22744%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%232C4084%22%20height%3D%2232%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22776%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%22240%22%20width%3D%22100%25%22%20x%3D%220%22%20y%3D%22808%22%3E%3C%2Frect%3E%3C%2Fg%3E%3Cg%20id%3D%22vertStripes%22%20mask%3D%22url(%23grating)%22%3E%3Crect%20fill%3D%22%23005020%22%20height%3D%22100%25%22%20width%3D%2216%22%20x%3D%220%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%22100%25%22%20width%3D%22240%22%20x%3D%2216%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%232C4084%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%22256%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%22288%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%22100%25%22%20width%3D%2248%22%20x%3D%22320%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E8C000%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22368%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22376%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E0E0E0%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22384%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22392%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23005020%22%20height%3D%22100%25%22%20width%3D%2280%22%20x%3D%22400%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%22480%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22512%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22520%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E0E0E0%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22528%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22536%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22544%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%22552%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23005020%22%20height%3D%22100%25%22%20width%3D%2280%22%20x%3D%22584%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22664%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E0E0E0%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22672%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22680%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23E8C000%22%20height%3D%22100%25%22%20width%3D%228%22%20x%3D%22688%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23101010%22%20height%3D%22100%25%22%20width%3D%2248%22%20x%3D%22696%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%22744%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%232C4084%22%20height%3D%22100%25%22%20width%3D%2232%22%20x%3D%22776%22%20y%3D%220%22%3E%3C%2Frect%3E%3Crect%20fill%3D%22%23DC0000%22%20height%3D%22100%25%22%20width%3D%22240%22%20x%3D%22808%22%20y%3D%220%22%3E%3C%2Frect%3E%3C%2Fg%3E%3C%2Fsvg%3E" x="0" y="0" width="80" height="80"></image></pattern>

</defs>
</svg>
`
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more