3f:null 40:["$","title",null,{"children":"SVG circle segments | Maksim Surguy | Observable"}] 46:[] 44:{"id":"a248612350f590c1","slug":"svg-circle-segments","title":"SVG circle segments","thumbnail":"0bca2c3d5f020128e56e6cda9d733f86b761030ba21df06da8b1288e64c84030","access_level":"public","create_time":"$D2020-05-14T17:26:47.625Z","update_time":"$D2020-05-14T17:53:48.233Z","view_time":null,"first_public_time":"$D2020-05-14T17:53:53.051Z","has_unpublished_edits":null,"fork":{"id":"888ab43c5911c5b3","slug":"svg-circle","title":"SVG circle segments","owner":{"id":"6d2a027a96475aac","login":"haakenlid","name":"Håken Lid"}},"stars":1,"starred":false,"owner":{"type":"team","id":"b70866d97388e132","login":"msurguy","name":"Maksim Surguy","avatar_url":"https://avatars-next.observableusercontent.com/7e9cac47fcc83c2b69d765c4e799d813f2e158dca84a9f1c759db77ffa9f20d7","tier":"starter_2024","bio":"Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy","following":false},"version":541,"publish_version":541,"role":null,"authored":false,"authors":[{"type":"individual","id":"10a57afa0a06ca21","login":"msurguy","name":"Maksim Surguy","avatar_url":"https://avatars-next.observableusercontent.com/7e9cac47fcc83c2b69d765c4e799d813f2e158dca84a9f1c759db77ffa9f20d7","tier":null,"bio":"Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy","following":false}],"members":[{"type":"individual","id":"10a57afa0a06ca21","login":"msurguy","name":"Maksim Surguy","avatar_url":"https://avatars-next.observableusercontent.com/7e9cac47fcc83c2b69d765c4e799d813f2e158dca84a9f1c759db77ffa9f20d7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVG circle segments","cells":[{"id":0,"value":"md`# SVG circle segments`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"viewof data = form(html`

segments\n

radius\n

margin\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"polarToCartesian = (x, y, r, degrees) => {\n const radians = degrees * Math.PI / 180.0;\n return [x + (r * Math.cos(radians)),\n y + (r * Math.sin(radians))]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"segmentPath = (x, y, r0, d0, d1) => {\n // https://svgwg.org/specs/paths/#PathDataEllipticalArcCommands\n const arc = Math.abs(d0 - d1) > 180 ? 1 : 0\n const point = (radius, degree) =>\n polarToCartesian(x, y, radius, degree)\n .map(n => n.toPrecision(3))\n .join(',')\n return [\n `M${point(r0, d0)}`,\n `A${r0},${r0},0,${arc},1,${point(r0, d1)}`\n ].join('')\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"segment = (n) => {\n const center = svgSize/2\n const degrees = 360 / segments \n const start = degrees * n \n const strokeWidth = 2\n const end = (degrees * (n + 1 - margin) + (margin == 0 ? 1 : 0))\n const path = segmentPath(center, center, radius - strokeWidth, start, end)\n return ``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"mutable segments = data.segments","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"radius = data.radius","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"margin = data.margin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"svgSize = Math.max(300, radius*2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"range = (n) => [...Array(n).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"