2c:null 2d:["$","title",null,{"children":"curved-polygon | Shreshth Mohan | Observable"}] 32:T594,33:[] 30:{"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","has_unpublished_edits":null,"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,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"curvedPolygon = import(\"https://cdn.skypack.dev/curved-polygon@0.1.5?min\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"