2d:null 2e:["$","title",null,{"children":"SVG Patterns | Martien van Steenbergen | Observable"}] 33:Tc75,viewof controls = { const step = 1 return inputsGroup( [ [ slider({ min: 0, max: aspect.width, step: step, value: aspect.width, title: "Viewport width", description: `Widen and narrow viewport along x-axis` }), slider({ min: 0, max: aspect.height, step: step, value: aspect.height, title: "Viewport height", description: `Widen and narrow viewport along x-axis` }), checkbox({ title: 'Viewport boundary', description: 'Show or hide viewport boundary', options: [ { label: 'Show', value: 'show' }, ], value: 'show' }) ], [ slider({ min: 0, max: width, step: step, value: 0, title: "Viewport xMin", description: `Shift viewport right and left` }), slider({ min: 0, max: aspect.height, step: 0, value: 0, title: "Viewport yMin", description: `Shift viewport down and up.` }), slider({ min: 0, max: 100, step: 1, value: 12, title: "Radius", }), ], [ slider({ min: -unit, max: unit, step: .5, value: 0, title: `Pattern shift x`, description: "Shift pattern along x-axis" }), slider({ min: -unit, max: unit, step: .5, value: 0, title: `Pattern shift y`, description: "Shift pattern along y-axis." }), color({ title: "Fill color" }) ], [ slider({ min: 0, max: 100, step: step, value: 0, title: "Stamp offset x", description: "Shift stamp along x" }), slider({ min: 0, max: 100, step: step, value: 0, title: "Stamp offset y", description: "Shift stamp along y" }), slider({ min: 0, max: unit, step: .5, value: 1, title: "Stroke Width", description: "For lines only." }), ],[ slider({ min: 0, max: aspect.width, step: 2, value: unit, title: "Stamp width", description: "A stamp’s width." }), slider({ min: 0, max: aspect.height, step: step, value: unit, title: "Stamp height", description: "A stamp’s height." }), color({ title: "Stroke color", value: "#e32400", description: " " }) ] ], [ ["viewportWidth", "viewportHeight", "showViewportBoundary"], ["viewportXMin", "viewportYMin", "radius"], ["stampX", "stampY", "stampColor"], ["stampShiftX", "stampShiftY", "strokeWidth"], ["stampWidth", "stampHeight", "strokeColor"] ] ) }34:T49d,stampClover = ``35:T1df5,stampFence = ` `36:[] 31:{"id":"4adbf91f0f8f2f27","slug":"svg-patterns","title":"SVG Patterns","thumbnail":"74bb6f0d32e2b57dd4c2a287b8745f58e23d70b7e5c92f7c83af6092900fde05","access_level":"public","create_time":"$D2019-02-16T15:46:16.414Z","update_time":"$D2020-04-07T19:44:55.053Z","view_time":null,"first_public_time":"$D2019-02-17T20:32:52.846Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":"starter_2024"},"version":5123,"publish_version":5123,"role":null,"authored":false,"authors":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}],"members":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"d594647d8d94d1ff","slug":"svg","title":"SVG","owner":{"id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen"}},"type":"notebook","body":{"title":"SVG Patterns","cells":[{"id":0,"value":"md`# SVG Patterns`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"{\n const p = DOM.uid(\"dot\")\n return svg`\n\n \n \n ${stamp}\n \n \n \n \n \n`\n \n function showBoundary () {\n return controls.showViewportBoundary ? `style=\"stroke:black;stroke-width:1;stroke-dasharray:1\"` : \"\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3068,"value":"md`Try and move the circle to the center of the pattern tile by adjusting the appropriate sliders.\n\nInitially, you only see the lower right quarter of the circle, because it has its center at (0, 0) of its square tile.\n\nTo make the circle fully visible, you have to move it away from (0, 0), best along the line _x = y_. Just fiddle with the proper sliders to make the circle completely visible.\n\nIncreasing the circle’s radius and/or stroke width will expose the tile’s edges at some point, also clearly revealing the tiling nature of the pattern.\n\nNow try the same with one of the other stamps to form a pattern.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"md`If the dimensions of the viewport are a multiple of the pattern’s size, it snugly fits a whole number of patterns.\n\nFor example, a viewport of 100×100 fits exactly 5×5 patterns of 20×20.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5078,"value":"stamp = stampCircle\n// select({\n// title: \"Pattern\",\n// description: \"Please pick a stamp for your pattern\",\n// options: [\n// { label: \"Circle\", value: stampCircle },\n// { label: \"Square\", value: stampSquare },\n// { label: \"Fence\", value: stampFence }\n// ],\n// value: \"Circle\"\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3121,"value":"md`### Basic unit and aspect ratio`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"unit = 36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"aspect = ratio()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3424,"value":"md`## Stamps`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"stampCircle = `\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"stampSquare = `\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3126,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"import {color, select, slider, radio, button, checkbox, text, file} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"import {inputsGroup} from \"@martien/inputs-in-grid\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5018,"value":"import {ratio} from \"@martien/aspect-ratio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3512,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"