2b:null 2c:["$","title",null,{"children":"Maker JS SVG path expand | Forrest O. | Observable"}] 31:T941,examplePathInput = "M 6 0 L 102 0 A 6 6 0 0 1 108 6 L 108 18 A 6 6 0 0 0 120 18 L 120 6 A 6 6 0 0 1 132 6 L 132 42 A 6 6 0 0 0 144 42 L 144 6 A 6 6 0 0 1 150 0 L 198 0 A 6 6 0 0 1 198 12 L 186 12 A 6 6 0 0 0 186 24 L 198 24 A 6 6 0 0 1 198 36 L 186 36 A 6 6 0 0 0 180 42 L 180 54 A 6 6 0 0 1 168 54 L 168 18 A 6 6 0 0 0 156 18 L 156 54 A 6 6 0 0 1 150 60 L 114 60 A 6 6 0 0 0 114 72 L 150 72 A 6 6 0 0 1 156 78 L 156 90 A 6 6 0 0 0 168 90 L 168 78 A 6 6 0 0 1 180 78 L 180 90 A 6 6 0 0 0 192 90 L 192 54 A 6 6 0 0 1 204 54 L 204 102 A 6 6 0 0 1 198 108 L 186 108 A 6 6 0 0 0 180 114 L 180 126 A 6 6 0 0 1 168 126 L 168 114 A 6 6 0 0 0 162 108 L 126 108 A 6 6 0 0 1 126 96 L 138 96 A 6 6 0 0 0 138 84 L 114 84 A 6 6 0 0 0 108 90 L 108 114 A 6 6 0 0 0 114 120 L 150 120 A 6 6 0 0 1 150 132 L 114 132 A 6 6 0 0 0 114 144 L 150 144 A 6 6 0 0 1 150 156 L 138 156 A 6 6 0 0 0 138 168 L 162 168 A 6 6 0 0 0 168 162 L 168 150 A 6 6 0 0 1 180 150 L 180 162 A 6 6 0 0 0 192 162 L 192 126 A 6 6 0 0 1 204 126 L 204 198 A 6 6 0 0 1 198 204 L 174 204 A 6 6 0 0 1 174 192 L 186 192 A 6 6 0 0 0 186 180 L 162 180 A 6 6 0 0 0 156 186 L 156 198 A 6 6 0 0 1 144 198 L 144 186 A 6 6 0 0 0 132 186 L 132 198 A 6 6 0 0 1 120 198 L 120 162 A 6 6 0 0 0 108 162 L 108 174 A 6 6 0 0 1 96 174 L 96 138 A 6 6 0 0 0 84 138 L 84 186 A 6 6 0 0 0 90 192 L 102 192 A 6 6 0 0 1 102 204 L 6 204 A 6 6 0 0 1 6 192 L 66 192 A 6 6 0 0 0 66 180 L 54 180 A 6 6 0 0 1 54 168 L 66 168 A 6 6 0 0 0 66 156 L 42 156 A 6 6 0 0 0 36 162 L 36 174 A 6 6 0 0 1 24 174 L 24 162 A 6 6 0 0 0 12 162 L 12 174 A 6 6 0 0 1 0 174 L 0 126 A 6 6 0 0 1 6 120 L 30 120 A 6 6 0 0 1 30 132 L 18 132 A 6 6 0 0 0 18 144 L 66 144 A 6 6 0 0 0 66 132 L 54 132 A 6 6 0 0 1 48 126 L 48 102 A 6 6 0 0 1 60 102 L 60 114 A 6 6 0 0 0 66 120 L 90 120 A 6 6 0 0 0 90 108 L 78 108 A 6 6 0 0 1 72 102 L 72 90 A 6 6 0 0 0 66 84 L 42 84 A 6 6 0 0 0 36 90 L 36 102 A 6 6 0 0 1 24 102 L 24 90 A 6 6 0 0 0 12 90 L 12 102 A 6 6 0 0 1 0 102 L 0 78 A 6 6 0 0 1 6 72 L 18 72 A 6 6 0 0 0 18 60 L 6 60 A 6 6 0 0 1 6 48 L 30 48 A 6 6 0 0 1 36 54 L 36 66 A 6 6 0 0 0 48 66 L 48 42 A 6 6 0 0 0 42 36 L 6 36 A 6 6 0 0 1 6 24 L 54 24 A 6 6 0 0 1 60 30 L 60 66 A 6 6 0 0 0 72 66 L 72 54 A 6 6 0 0 1 84 54 L 84 90 A 6 6 0 0 0 96 90 L 96 54 A 6 6 0 0 1 102 48 L 114 48 A 6 6 0 0 0 114 36 L 78 36 A 6 6 0 0 1 78 24 L 90 24 A 6 6 0 0 0 90 12 L 6 12 A 6 6 0 0 1 6 0 Z"32:[] 2f:{"id":"a47db5d7c5852a2c","slug":"maker-js-svg-path-expand","title":"Maker JS SVG path expand","thumbnail":"229b8e3a5d5890d5460194c6ea2525279766e4cc5edaf880bd6586ec5afbdfab","access_level":"public","create_time":"$D2019-08-31T13:58:27.778Z","update_time":"$D2019-09-04T14:15:48.245Z","view_time":null,"first_public_time":"$D2019-08-31T14:32:56.009Z","fork":{"id":"57b8f084d99187e8","slug":"maker-js-svg-path-simplify","title":"Maker JS SVG path simplify","owner":{"id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O."}},"stars":0,"starred":false,"owner":{"type":"team","id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":"starter_2024"},"version":163,"publish_version":163,"role":null,"authored":false,"authors":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null}],"members":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"6775b0fa0cb0d1a3","slug":"labyrinth","title":"labyrinth","owner":{"id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O."}},"type":"notebook","body":{"title":"Maker JS SVG path expand","cells":[{"id":0,"value":"md`# Maker JS SVG path expand\n\n* https://maker.js.org/docs/advanced-drawing/#Expanding paths\n\nA sweet utility from Maker JS to expand a path to another path. A [known bug](https://github.com/microsoft/maker.js/issues/390#issuecomment-526835270): you might have more luck expanding by eg \\`2.0001\\` than \\`2\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"expandPath = (pathString, expandBy = 2, bevel = 0, origin = [0, 0]) => {\n const makerModel = makerjs.importer.fromSVGPathData(pathString);\n makerjs.model.originate(makerModel);\n makerjs.model.simplify(makerModel);\n // IDK why we need + 0.00001 here\n const expanded = makerjs.model.expandPaths(makerModel, expandBy, bevel);\n makerjs.model.simplify(expanded);\n const svg = html`${makerjs.exporter.toSVG(expanded, { origin })}`;\n return svg.querySelector(\"path\").getAttribute(\"d\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"md`## Example input\n\nExample from https://observablehq.com/@forresto/labyrinth-to-svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"inputLength = examplePathInput.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`## Example Output`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"exampleOutput = expandPath(examplePathInput, 2 + 0.00001, 0, [3, 3])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"exampleOutputLength = exampleOutput.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"md`## Demo of bug with whole numbers\n\nhttps://github.com/microsoft/maker.js/issues/390`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"exampleOutputBug = expandPath(examplePathInput, 2, 0, [3, 3])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"makerjs = require(\"https://bundle.run/makerjs@0.17.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"