30:T473,md` What do all these \`\` attributes mean? * **width**: Since we're using a viewBox, this doesn't actually matter, it just needs to be some value. * **height**: This will determine the width of our hatching lines. * **patternUnits**\`="userSpaceOnUse"\`: This (confusingly) defaults to "\`objectBoundingBox\`" as explained [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns). Using "\`objectBoundingBox\`" would mean that the size of each line would be *relative* to the size of the shape that we're filling. In most cases (for dataviz, at least), we don't want that to happen. * **patternContentUnits**\`="userSpaceOnUse"\`: This is actually the default, and we add it here for clarity. * **viewBox**\`="0 0 100 100"\`: Draw the pattern in viewBox coordinates, which means we don't have to worry about its actual size. * **preserveAspectRatio**\`="none"\`: This means that we want the pattern to stretch to fit the viewBox that we just defined. Setting this to \`none\` means the \`width\` of the pattern doesn't really matter. * **patternTransform**\`="rotate(45)"\`: Rotate the pattern by 45 degrees. `31:[] 2e:{"title":"Simple SVG Hatching","cells":[{"id":0,"value":"md`# Simple SVG Hatching`","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"hatches()","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"md`Mozilla [describes](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns) SVG \\`\\` elements as \"arguably one of the more confusing fill types to use in SVG,\" and I don't disagree.\n\nI usually only need SVG patterns when I want to use [hatching](https://en.wikipedia.org/wiki/Hatching) on an element such as a bar in a bar chart.\n\nHere's a relatively simple (and modular) way to create a hatching pattern: \n\nUsing a viewBox, draw a horizontal line, then use \\`patternTransform\\` to rotate the line:\n\n~~~html\n\n \n\n~~~\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"md`Our pattern content is a very simple line. Remember that all of the line's attributes use our \\`viewBox\\` coordinates. So it's just a horizontal line which:\n* is vertically centered in the viewBox (\\`y1\\` and \\`y2\\` are both \\`50\\`)\n* is stretches all the way across the viewBox (\\`x\\` goes from \\`0\\` to \\`100\\`) \n* has a stroke width that's 50% of the viewBox (\\`stroke-width=\"50\"\\`)\n\n~~~html\n\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"md`Before rotating, our pattern would look like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"{\n return html`\n

\n \n \n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"md`Then we just rotate the pattern (by adding \\`patternTransform=\"rotate(45)\"\\`) and boom:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"{\n return html`\n

\n \n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"md`You can adjust the size and angle of the lines by adjusting the \\`height\\` and \\`patternTransform\\` of the pattern:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"hatches()","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"function hatches() {\n const boxes = [\n [7, 45],\n [10, 45],\n [15, 45],\n [7, 45],\n [7, 30],\n [7, -20],\n [7, 80]\n ].map(([size, angle], i, arr) => {\n const id = `hatching-${Math.floor(Math.random() * 1e4)}`;\n return html`\n\n \n\n `;\n });\n\n return html`${boxes}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { html, svg } from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}