30: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``; }31:[] 2e:{"title":"[SVG] Stroke-dasharray","cells":[{"id":0,"value":"md`# [SVG] Stroke-dasharray`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":955,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":628,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"md`## Try It Yourself: Draw Single Edge of a Rectangle`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1186,"value":"viewof side = select({\n options: [\"top\", \"bottom\", \"right\", \"left\"],\n title: \"Edge to Draw\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"html`\n

Output:

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

Correct!

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