2c:null 2d:["$","title",null,{"children":"svg: regular polygons with curved path | Benjamin | Observable"}] 32:T783,{ return htl.html`

${render(shapes.circle, { pathColor: colors.gray })} ${render(shapes.triangle, { pathColor: colors.red })} ${render(shapes.square, { pathColor: colors.yellow })} ${render(shapes.circle, { pathColor: colors.gray })} ${render(shapes.pentagon, { pathColor: colors.green })} ${render(shapes.hexagon, { pathColor: colors.blue })} ${render(shapes.heptagon, { pathColor: colors.magenta })} ${render(shapes.circle, { pathColor: colors.gray })}

${render(shapes.circle, { pathColor: colors.gray, isStacked: true })} ${render(shapes.triangle, { pathColor: colors.red, isStacked: true })} ${render(shapes.square, { pathColor: colors.yellow, isStacked: true })} ${render(shapes.circle, { pathColor: colors.gray, isStacked: true })} ${render(shapes.pentagon, { pathColor: colors.green, isStacked: true })} ${render(shapes.hexagon, { pathColor: colors.blue, isStacked: true })} ${render(shapes.heptagon, { pathColor: colors.magenta, isStacked: true })} ${render(shapes.circle, { pathColor: colors.gray, isStacked: true })}

${render(shapes.circle, { pathColor: colors.gray, isDashed: true })} ${render(shapes.triangle, { pathColor: colors.red, isDashed: true })} ${render(shapes.square, { pathColor: colors.yellow, isDashed: true })} ${render(shapes.circle, { pathColor: colors.gray, isDashed: true })} ${render(shapes.pentagon, { pathColor: colors.green, isDashed: true })} ${render(shapes.hexagon, { pathColor: colors.blue, isDashed: true })} ${render(shapes.heptagon, { pathColor: colors.magenta, isDashed: true })} ${render(shapes.circle, { pathColor: colors.gray, isDashed: true })}

`; }33:T727,function render(points, { ...options }) { options.isStacked = options.isStacked ?? false; options.isDashed = options.isDashed ?? false; options.pathColor = options.pathColor ?? "black"; options.scale = options.scale ?? 40; options.pathSize = options.pathSize ?? 0.1 * options.scale; options.circleSize = options.circleSize ?? 0.15 * options.scale; const path = curvedPath(points); const box = bbox(points); const width = 2.2 * options.scale; // (box.xMax - box.xMin) * scale + scale; let height = 2.2 * options.scale; // (box.yMax - box.yMin) * scale + scale; const translateX = width / 2; const translateY = height / 2; height = options.isStacked ? 2.6 * options.scale : height; const groupStackStyle = ` visibility: ${options.isStacked ? "visible" : "hidden"}; `; const groupStyle = ` transform: translate(${translateX}px, ${translateY}px); `; const pathStyle = ` transform: scale(${options.scale}); fill: white; stroke: ${options.pathColor}; stroke-width: ${options.pathSize / options.scale}px; stroke-dasharray: ${options.isDashed ? "0.25px 0.2px" : "none"}; `; const circleStyle = ` stroke: black; transform: scale(${1}); `; return htl.html` `; }34:[] 30:{"id":"d71a95ea0ab310a0","slug":"svg-regular-polygons","title":"svg: regular polygons with curved path","thumbnail":"6dc4c36cd6633178c957431299e74a68787a4eb6f37ea780ea354d90671af292","access_level":"public","create_time":"$D2024-10-23T21:56:27.872Z","update_time":"$D2024-10-31T18:41:58.836Z","view_time":null,"first_public_time":"$D2024-10-23T22:32:18.894Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"8a1645a08dfd342c","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":"starter_2024"},"version":303,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null}],"members":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null,"role":"editor"},{"type":"team","id":"8a1645a08dfd342c","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"svg: regular polygons with curved path","cells":[{"id":0,"value":"# svg: regular polygons with curved path","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"shapes = ({\n triangle: shape(3),\n square: shape(4),\n pentagon: shape(5),\n hexagon: shape(6),\n heptagon: shape(7),\n circle: shape(100)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"colors = ({\n neutral: \"#f9f9fb\",\n red: \"#d97706\",\n yellow: \"#eab308\",\n green: \"#10b981\",\n blue: \"#3b82f6\",\n magenta: \"#d946ef\",\n gray: \"#a1a1aa\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"function shape(sides) {\n let points = polar(sides);\n if (sides === 3) {\n points = scale(points, 1.15, 1.15);\n points = translate(points, 0, 0.25);\n }\n if (sides === 4) {\n points = rotate(points, 45);\n points = scale(points, 1.15, 1.15);\n }\n if (sides === 100) {\n points = scale(points, 0.95, 0.95);\n }\n return points;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function curvedPath(points, tension = 0.65) {\n const curve = d3.curveCardinalClosed.tension(tension);\n const spline = d3.line().curve(curve);\n return spline(points.map((point) => [point.x, point.y]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function Point(x, y) {\n return { x, y };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function polar(sides) {\n if (sides < 3) {\n throw new Error(\"must have at least 3 sides.\");\n }\n const angle = (2 * Math.PI) / sides;\n\n return d3\n .range(0, sides)\n .map((index) => Point(Math.sin(index * angle), -Math.cos(index * angle)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"function translate(points, translateX, translateY) {\n return points.map((point) => {\n return Point(point.x + translateX, point.y + translateY);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"function scale(points, scaleX, scaleY) {\n return points.map((point) => {\n return Point(point.x * scaleX, point.y * scaleY);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"function rotate(points, rotateAngle) {\n const radians = rotateAngle * (Math.PI / 180);\n const cos = Math.cos(radians);\n const sin = Math.sin(radians);\n return points.map((point) => {\n return Point(point.x * cos - point.y * sin, point.x * sin + point.y * cos);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"function bbox(points) {\n if (points.length < 1) {\n throw new Error(\"must have at least 1 point.\");\n }\n const x = points.map((point) => point.x);\n const y = points.map((point) => point.y);\n\n return {\n xMin: Math.min(...x),\n xMax: Math.max(...x),\n yMin: Math.min(...y),\n yMax: Math.max(...y)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"