2c:null 2d:["$","title",null,{"children":"SVG Hatching Without Using | Paul Murray | Observable"}] 32:[] 30:{"id":"e6ac6f7b6316e515","slug":"diy-svg-hatching","title":"SVG Hatching Without Using ","thumbnail":"c3c74770037faa1fd8ae70f8cf9a22112b1738255ad3e1dc09d428d774439918","access_level":"public","create_time":"$D2021-07-12T23:04:47.433Z","update_time":"$D2023-12-19T00:15:21.544Z","view_time":null,"first_public_time":"$D2021-07-12T23:25:13.403Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"77ca23d94884ea46","login":"plmrry","name":"Paul Murray","avatar_url":"https://avatars-next.observableusercontent.com/e55c33ea9568426a80f30a4e3ca4f71e21571d01804bee4b863c3063bd4a62e1","tier":"starter_2024"},"version":200,"publish_version":null,"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,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVG Hatching Without Using ","cells":[{"id":0,"value":"# SVG Hatching Without Using ``","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"AxiDraw is a pen plotter, and pen plotters draw lines. \n\nIf we want our pen plotter to draw a _filled_ area, we have to figure that out on our own. That is, we have to turn the filled area into lines (or dots) somehow.\n\nThe natural answer to SVG hatching is to [use a `` element](https://observablehq.com/@plmrry/simple-svg-hatching). \n\nHowever, the software I use to control my AxiDraw — called [`saxi`](https://github.com/nornagon/saxi), and it's really wonderful! — doesn't support SVG patterns.\n\nThis means we'll need to create our own DIY, artisinal hatching patterns.\n\n(Evil Mad Scientist does provide a [Hatch fill plugin for Inkscape](https://wiki.evilmadscientist.com/Hatch_fill), but I don't really use Inkscape, and hey, why not figure this out on our own)\n\nWe'll start with something simple: A horizontal hatch.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"## Horizontal Hatch","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"function hatchHorizontal(config) {\n const { n, stroke = \"black\" } = config;\n const domain = d3.range(n);\n const scale = d3.scalePoint(domain, [0, config.height]);\n const lines = domain.map((index) => {\n const y = config.y + scale(index);\n const x = config.x;\n const x1 = x;\n const y1 = y;\n const x2 = x1 + config.width;\n const y2 = y;\n return htl.svg``;\n });\n return lines;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"## Diagonal Hatch","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"{\n const diagonal = htl.svg``;\n return diagonal;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"function hatchDiagonal(config) {\n const { n, theta = -45, stroke = \"black\" } = config;\n const center = {\n x: config.x + config.width / 2,\n y: config.y + config.height / 2\n };\n const domain = d3.range(n);\n const scale = d3.scalePoint(domain, [0, config.height]);\n const lines = domain.map((index) => {\n const y = config.y + scale(index);\n const x = config.x;\n const x1_ = x;\n const y1_ = y;\n const x2_ = x1_ + config.width;\n const y2_ = y;\n const [x1, y1] = rotate(center.x, center.y, x1_, y1_, theta);\n const [x2, y2] = rotate(center.x, center.y, x2_, y2_, theta);\n return htl.svg``;\n });\n return lines;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"function rotate(cx, cy, x, y, degrees) {\n const radians = (Math.PI / 180) * degrees;\n const cos = Math.cos(radians);\n const sin = Math.sin(radians);\n const nx = cos * (x - cx) + sin * (y - cy) + cx;\n const ny = cos * (y - cy) - sin * (x - cx) + cy;\n return [nx, ny];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"