31: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 })}

`; }32: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` `; }33:[] 2f:{"title":"svg: regular polygons with curved path","cells":[{"id":0,"value":"# svg: regular polygons with curved path","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":7,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":19,"value":"function Point(x, y) {\n return { x, y };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"}],"files":"$W33","stdlib":"1","titling":"auto"}