2b:null 2c:["$","title",null,{"children":"SVG Markers | TU Delft Library | Observable"}] 31:[] 2f:{"id":"7efd4f9cf21a146a","slug":null,"title":"SVG Markers","thumbnail":"e444fcca5c1dffbc2f2a8356d1585f88be928aa29a5e591f7f6f2733d08f6cfd","access_level":"public","create_time":"$D2024-01-27T16:56:47.031Z","update_time":"$D2024-04-22T15:10:14.720Z","view_time":null,"first_public_time":"$D2024-01-27T16:56:47.031Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ab036510f7d8e0c1","login":"tudelft","name":"TU Delft Library","avatar_url":"https://avatars-next.observableusercontent.com/1518fc717636b8b67a285d240e13db0d86f758541cb7cbe64b759dfb901b40c6","tier":"pro_2024"},"version":171,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f444e659497ac4e5","login":"sammeltassen","name":"Jules Schoonman","avatar_url":"https://avatars-next.observableusercontent.com/d8e1e715f8e8560d0970b3d60336fe11ce634dd18ec4107ab6e99022494e616c","tier":null}],"members":[{"type":"individual","id":"f444e659497ac4e5","login":"sammeltassen","name":"Jules Schoonman","avatar_url":"https://avatars-next.observableusercontent.com/d8e1e715f8e8560d0970b3d60336fe11ce634dd18ec4107ab6e99022494e616c","tier":null,"role":"editor"},{"type":"team","id":"ab036510f7d8e0c1","login":"tudelft","name":"TU Delft Library","avatar_url":"https://avatars-next.observableusercontent.com/1518fc717636b8b67a285d240e13db0d86f758541cb7cbe64b759dfb901b40c6","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"SVG Markers","cells":[{"id":0,"value":"# SVG Markers\n\nFor:\n- https://cityatlas.theberlage.nl/\n\nDesign by Alfons Hooikaas\n\nSources:\n- https://codepen.io/tlflow/pen/PzqjvO\n- https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"## Marker 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"viewof segments = Inputs.range([1, 100], {\n label: \"Segments\",\n step: 1,\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof slices = Inputs.range([2, 100], {\n label: \"Slices\",\n step: 2,\n value: 36\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"{\n const initialR = radius;\n // const circumfence = 2 * Math.PI * r;\n // const segments = 5;\n const width = initialR / segments;\n let circles = new Array();\n for (let step = 0; step < segments; step++) {\n const r = initialR - (width / 2 + width * step);\n const circumfence = 2 * Math.PI * r;\n const svg = ``;\n circles.push(svg);\n }\n const svg = html``;\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"## Marker 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"viewof layers = Inputs.range([1, segments], {\n label: \"Layers\",\n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"{\n const initialR = radius;\n // const circumfence = 2 * Math.PI * r;\n // const segments = 5;\n const width = initialR / segments;\n let circles = new Array();\n for (let step = 0; step < layers; step++) {\n const r = initialR - (width / 2 + width * step);\n const circumfence = 2 * Math.PI * r;\n const dash = circumfence / slices;\n const svg = ``;\n circles.push(svg);\n }\n const svg = html``;\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"radius = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"function isEven(n) {\n return n % 2 == 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"