{"id":18292438,"url":"https://github.com/shreshthmohan/curved-polygon","last_synced_at":"2026-02-07T18:06:02.951Z","repository":{"id":42439443,"uuid":"467180783","full_name":"shreshthmohan/curved-polygon","owner":"shreshthmohan","description":"A tiny utility for curved polygons in SVG","archived":false,"fork":false,"pushed_at":"2022-09-29T23:39:22.000Z","size":128,"stargazers_count":4,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T01:04:50.443Z","etag":null,"topics":["curved","javascript","polygon","polygons","svg"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shreshthmohan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-07T16:51:30.000Z","updated_at":"2025-02-15T20:07:24.000Z","dependencies_parsed_at":"2023-01-18T14:00:22.704Z","dependency_job_id":null,"html_url":"https://github.com/shreshthmohan/curved-polygon","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shreshthmohan%2Fcurved-polygon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shreshthmohan%2Fcurved-polygon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shreshthmohan%2Fcurved-polygon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shreshthmohan%2Fcurved-polygon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shreshthmohan","download_url":"https://codeload.github.com/shreshthmohan/curved-polygon/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247999852,"owners_count":21031044,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["curved","javascript","polygon","polygons","svg"],"created_at":"2024-11-05T14:18:10.887Z","updated_at":"2026-02-07T18:06:02.716Z","avatar_url":"https://github.com/shreshthmohan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# curved-polygon: A tiny library for creating regular polygons with rounded corners in SVG\n\n[![curved-poly-demo](https://user-images.githubusercontent.com/5955802/161431592-26629d30-1332-406d-9aa9-86f8614e3be7.gif)](https://observablehq.com/@shreshthmohan/curved-polygon)\n\n## Installation\n\nFor legacy environments (UMD bundle), direct usage in the browser\n\n```\n\u003cscript src=\"https://unpkg.com/curved-polygon@latest\"\u003e\u003c/script\u003e\n```\n\nAs an npm package\n\n```\nnpm install curved-polygon\n```\n\n## `roundedPolygonByCircumRadius(options)`\n\n`options` properties\n\n- `circumRadius` (number, required) size of the polygon, contained inside a circle of this provided value\n- `[borderRadius]` (number, default = 0, optional) radius of the curved polygon corner\n- `[sideCount]` (number, default = 3, optional) number of polygon sides\n- `[cx]` (number, default = 0, optional) polygon center x position\n- `[cy]` (number, default = 0, optional) polygon center y position\n- `[rotate]` (number, default = 0, optional) rotation angle in degrees\n\n### Usage (circumradius):\n\n```\nimport { roundedPolygonByCircumRadius } from 'curved-polygon'\n\nconst pathStringC = roundedPolygonByCircumRadius({\n  circumRadius: 200,\n  sideCount: 5,\n  borderRadius: 10,\n  cx: 150,\n  cy: 150,\n  rotate: 15,\n})\n// \"M 260.291625178441 311.8033988749895 A 10 10 1.2566370614359172 0 0 269.8021903413926 304.89356881873897 L 337.96616337613284 95.10643118126106 A 10 10 1.2566370614359172 0 0 334.333450736106 83.92609129376211 L 155.87785252292477 -45.72949016875157 A 10 10 1.2566370614359172 0 0 144.1221474770753 -45.729490168751596 L -34.33345073610599 83.92609129376206 A 10 10 1.2566370614359172 0 0 -37.96616337613278 95.106431181261 L 30.197809658607397 304.8935688187389 A 10 10 1.2566370614359172 0 0 39.708374821558934 311.8033988749895 z\"\n// set this to the \"d\" attribute of a \u003cpath\u003e SVG element\n```\n\n### return value\n\nThe return value is an **object** with the following properties:\n\n- `d` (string) SVG path string to be used as a value to the `d` attributes of a `\u003cpath\u003e` element\n- `meta` (object) contains helpful values: `sideLength`, `circumRadius`, `inRadius`, `minSideLength`, and `borderRadius`\n- `warnings` (an array of strings)\n- `errors` (an array of strings)\n\n## `roundedPolygonBySideLength(options)`\n\n`options` properties\n\n- `circumRadius` (number, required) size of the polygon, contained inside a circle of this provided value\n- `[borderRadius]` (number, default = 0, optional) radius of the curved polygon corner\n- `[sideCount]` (number, default = 3, optional) number of polygon sides\n- `[cx]` (number, default = 0, optional) polygon center x position\n- `[cy]` (number, default = 0, optional) polygon center y position\n- `[rotate]` (number, default = 0, optional) rotation angle in degrees\n\n### Usage (side length):\n\n```\nimport { roundedPolygonBySideLength } from 'curved-polygon'\n\nconst pathStringS = roundedPolygonBySideLength({\n  sideLength: 200,\n  sideCount: 5,\n  borderRadius: 10,\n  cx: 150,\n  cy: 150,\n  rotate: 90,\n})\n// \"M 242.7345747199464 287.63819204711734 A 10 10 1.2566370614359172 0 0 252.24513988289794 280.7283619908668 L 309.55825899209157 104.33671884433718 A 10 10 1.2566370614359172 0 0 305.92554635206477 93.15637895683824 L 155.87785252292474 -15.85965183915954 A 10 10 1.2566370614359172 0 0 144.1221474770753 -15.859651839159568 L -5.9255463520647425 93.1563789568382 A 10 10 1.2566370614359172 0 0 -9.558258992091538 104.33671884433714 L 47.75486011710204 280.7283619908668 A 10 10 1.2566370614359172 0 0 57.26542528005358 287.63819204711734 z\"\n// set this to the \"d\" attribute of a \u003cpath\u003e SVG element\n```\n\n### return value\n\nThe return value is an **object** with the following properties:\n\n- `d` (string) SVG path string to be used as a value to the `d` attributes of a `\u003cpath\u003e` element\n- `meta` (object) contains helpful values: `sideLength`, `circumRadius`, `inRadius`, `minSideLength`, and `borderRadius`\n- `warnings` (an array of strings)\n- `errors` (an array of strings)\n\n## Demos\n\n- [Codepen (UMD)](https://codepen.io/shreshthmohan/pen/mdpqaPY)\n- [Observable - Interactive](https://observablehq.com/@shreshthmohan/curved-polygon)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshreshthmohan%2Fcurved-polygon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshreshthmohan%2Fcurved-polygon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshreshthmohan%2Fcurved-polygon/lists"}