2b:null 2c:["$","title",null,{"children":"Simple SVG Hatching | Paul Murray | Observable"}] 31: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. `32:[] 2f:{"id":"8769ae2240f77128","slug":"simple-svg-hatching","title":"Simple SVG Hatching","thumbnail":"80d712c64eef96f727ae1857a2a715669a88afcf96217c9a6f712b7447cf137f","access_level":"public","create_time":"$D2021-02-26T19:44:51.907Z","update_time":"$D2022-05-24T19:49:04.403Z","view_time":null,"first_public_time":"$D2021-02-26T22:23:52.849Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"77ca23d94884ea46","login":"plmrry","name":"Paul Murray","avatar_url":"https://avatars-next.observableusercontent.com/e55c33ea9568426a80f30a4e3ca4f71e21571d01804bee4b863c3063bd4a62e1","tier":"starter_2024"},"version":508,"publish_version":508,"role":null,"authored":false,"authors":[{"type":"individual","id":"88a33f32468b0503","login":"plmrry","name":"Paul Murray","avatar_url":"https://avatars-next.observableusercontent.com/e55c33ea9568426a80f30a4e3ca4f71e21571d01804bee4b863c3063bd4a62e1","tier":null}],"members":[{"type":"individual","id":"88a33f32468b0503","login":"plmrry","name":"Paul Murray","avatar_url":"https://avatars-next.observableusercontent.com/e55c33ea9568426a80f30a4e3ca4f71e21571d01804bee4b863c3063bd4a62e1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Simple SVG Hatching","cells":[{"id":0,"value":"md`# Simple SVG Hatching`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"hatches()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":400,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":474,"value":"md`Before rotating, our pattern would look like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":477,"value":"{\n return html`\n

\n \n \n

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

\n \n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":449,"value":"hatches()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2,"value":"import { html, svg } from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"