2c:null 2d:["$","title",null,{"children":"[SVG] Stroke-dasharray | Jimmy Zhang | Observable"}] 32:T813,{ const w = 30; const tickScale = d3 .scaleLinear() .domain([1, 10]) .range([.125, .175]); const fontScale = d3 .scaleLinear() .domain([1, 10]) .range([.025, .0325]); const paddingScale = d3 .scaleLinear() .domain([1, 10]) .range([.15, .5]); const dash = start => { if (start + dashes > w) return; // add asterik to dash label if it is cut off const t = start + dashes > w ? w - start + "*" : dashes; return svg` ${t} `; }; const _gap = (start, end) => { if (start + gaps > w) return; const padding = paddingScale(end); const tickLength = tickScale(end); const fontSize = fontScale(end); // add asterik to gap label if it is cut off const t = end === gaps ? gaps : "*"; return svg` ${t} `; }; const gap = start => { return start + gaps > w ? _gap(start, w - start) : _gap(start, gaps); }; return svg``; }33:[] 30:{"id":"4a1c466dc57c64fe","slug":"svg-stroke-dasharray","title":"[SVG] Stroke-dasharray","thumbnail":"aef41ce65fe771fdb926e7e46bab5aa053eec7399be2044e330502b666b16344","access_level":"public","create_time":"$D2020-08-26T03:00:36.595Z","update_time":"$D2021-01-24T04:33:51.559Z","view_time":null,"first_public_time":"$D2021-01-23T20:41:39.538Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"8e1b7fadfb4fae45","login":"jzhang","name":"Jimmy Zhang","avatar_url":"https://avatars-next.observableusercontent.com/d339fb5ce9b016c6eb835831aa678b41fa731155c55d86b8155d6ef989bd58d6","tier":"starter_2024","bio":"Basketball and data visualization enthusiast. Former engineer at @observablehq"},"version":1416,"publish_version":1416,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c36f3a53eb6b985","login":"jzhang","name":"Jimmy Zhang","avatar_url":"https://avatars-next.observableusercontent.com/d339fb5ce9b016c6eb835831aa678b41fa731155c55d86b8155d6ef989bd58d6","tier":null,"bio":"Basketball and data visualization enthusiast. Former engineer at @observablehq"}],"members":[{"type":"individual","id":"7c36f3a53eb6b985","login":"jzhang","name":"Jimmy Zhang","avatar_url":"https://avatars-next.observableusercontent.com/d339fb5ce9b016c6eb835831aa678b41fa731155c55d86b8155d6ef989bd58d6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9fba2dcf2448e8c5","slug":"tutorials-i-wish-i-had","title":"Tutorials I Wish I Had","owner":{"id":"8e1b7fadfb4fae45","login":"jzhang","name":"Jimmy Zhang"}},"type":"notebook","body":{"titling":"auto","title":"[SVG] Stroke-dasharray","cells":[{"id":0,"value":"md`# [SVG] Stroke-dasharray`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`A presentation attribute that \"defines the pattern of dashes and gaps used to paint the outline of a shape.\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"md`## Create a Dashed Line\n\nProvide two comma-seperated values to the attribute. The first defines the lengths of the dashes, the second defines the length of the gaps between the dashes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"md`\n \n <line x1=\"0\" y1=\"0\" x1=\"5\" y2=\"0\" stroke-dasharray=\"${dashes},${gaps}\"/>\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"viewof dashes = slider({\n min: 1,\n max: 8,\n step: 1,\n value: 2,\n title: \"Dashes\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof gaps = slider({\n min: 1,\n max: 8,\n step: 1,\n value: 1,\n title: \"Gaps\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"md`## Shape Outlines\n\n\\`stroke-dasharray\\` can be applied to elements such as \\`\\`, \\`\\`, and \\`\\`:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"viewof shapeDashes = slider({\n min: 1,\n max: 19,\n step: 2,\n value: 1,\n title: \"Dashes\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"viewof shapeGaps = slider({\n min: 1,\n max: 19,\n step: 2,\n value: 1,\n title: \"Gaps\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"md`## Try It Yourself: Draw Single Edge of a Rectangle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"md`We can use \\`stroke-dasharray\\` to draw a single edge of a rectangle. \n\nInput the value for \\`stroke-dasharray\\` that will render only the ${side} edge of a rectangle with width ${dimensions.w} and height ${dimensions.h}.\n\n**Hints**:\n* Edges are drawn clockwise, starting from the top left corner.\n* If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2. [[MDN docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)]`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"viewof input = text({\n placeholder: \"0,0\",\n title: html`

stroke-dasharray

`,\n submit: \"Render\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"viewof side = select({\n options: [\"top\", \"bottom\", \"right\", \"left\"],\n title: \"Edge to Draw\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"html`\n

Output:

\n${drawRect()}\n${input === abc ? html`

Correct!

` : ''}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1404,"value":"md`---\n\n## Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1167,"value":"function drawRect() {\n const dashArray = input === \"\" ? \"0,0\" : input;\n\n const border = input === abc ? \"#9ACD32\" : null;\n\n return svg`