2a:null 2b:["$","title",null,{"children":"curved-polygon | Shreshth Mohan | Observable"}] 31:T594,32:[] 2e:{"id":"d5e00b8e4e7c05a8","slug":"curved-polygon","title":"curved-polygon","thumbnail":"a401ac33e0740c1eb246a2cce1c4d3733900c9b6c4ced8fab0ddf6e80016508d","access_level":"public","create_time":"$D2022-04-03T09:57:38.298Z","update_time":"$D2022-09-30T10:42:04.899Z","view_time":null,"first_public_time":"$D2022-04-03T10:43:25.241Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"73bc516ca29b1924","login":"shreshthmohan","name":"Shreshth Mohan","avatar_url":"https://avatars-next.observableusercontent.com/0e808176c1a435a909a72a1a5c73f111b8f5bef619bff383261ca32002c5de57","tier":"starter_2024"},"version":170,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f190f9c94eb4b295","login":"shreshthmohan","name":"Shreshth Mohan","avatar_url":"https://avatars-next.observableusercontent.com/0e808176c1a435a909a72a1a5c73f111b8f5bef619bff383261ca32002c5de57","tier":null}],"members":[{"type":"individual","id":"f190f9c94eb4b295","login":"shreshthmohan","name":"Shreshth Mohan","avatar_url":"https://avatars-next.observableusercontent.com/0e808176c1a435a909a72a1a5c73f111b8f5bef619bff383261ca32002c5de57","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"curved-polygon","cells":[{"id":0,"value":"# curved-polygon\n\nA tiny JS utility for creating regular polygons with rounded corners in SVG\n\n[GitHub](https://github.com/shreshthmohan/curved-polygon) | [npm](https://www.npmjs.com/package/curved-polygon)","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"viewof polygonControls = Inputs.form({\n sideCount: Inputs.range([3, 20], { step: 1, label: \"sideCount\", value: 3 }),\n borderRadius: Inputs.range([0, 100], {\n step: 1,\n label: \"borderRadius\",\n value: 0\n }),\n circumRadius: Inputs.range([1, 300], {\n value: 140,\n step: 1,\n label: \"circumRadius\"\n }),\n cx: Inputs.range([0, 300], {\n value: 150,\n step: 1,\n label: \"cx\"\n }),\n cy: Inputs.range([0, 300], {\n value: 150,\n step: 1,\n label: \"cy\"\n }),\n rotate: Inputs.range([0, 360], {\n value: 90,\n step: 1,\n label: \"rotate\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":129,"value":"## Install \n```bash\nnpm install curved-polygon\n```\n\n## Use in code\n\nThere are two functions provided:\n1. `roundedPolygonByCircumRadius`\n2. `roundedPolygonBySideLength`\n\nUsage is similar, except for one option, circumRadius vs sideLength\n```\nimport {roundedPolygonByCircumRadius, roundedPolygonBySideLength} from 'curved-polygon'\n\nconst pathStringC = roundedPolygonByCircumRadius({\n circumRadius: 200,\n sideCount: 5,\n borderRadius: 10,\n cx: 150,\n cy: 150\n})\n\nconst pathStringS = roundedPolygonBySideLength({\n sideLength: 200,\n sideCount: 5,\n borderRadius: 10,\n cx: 150,\n cy: 150\n})\n```\n\nThe advantage of using the circumradius variant is that you won't need to worry about the size of the polygon growing with the number of sides with the side length constant.","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":43,"value":"curvedPolygon = import(\"https://cdn.skypack.dev/curved-polygon@0.1.5?min\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"pathStringC = curvedPolygon.roundedPolygonByCircumRadius({\n circumRadius: 200,\n sideCount: 5,\n borderRadius: 10,\n cx: 150,\n cy: 150\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"pathStringS = curvedPolygon.roundedPolygonBySideLength({\n sideLength: 200,\n sideCount: 5,\n borderRadius: 10,\n cx: 150,\n cy: 150\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"