Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shreshthmohan/curved-polygon
A tiny utility for curved polygons in SVG
https://github.com/shreshthmohan/curved-polygon
curved javascript polygon polygons svg
Last synced: 11 days ago
JSON representation
A tiny utility for curved polygons in SVG
- Host: GitHub
- URL: https://github.com/shreshthmohan/curved-polygon
- Owner: shreshthmohan
- License: isc
- Created: 2022-03-07T16:51:30.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-29T23:39:22.000Z (over 2 years ago)
- Last Synced: 2024-12-19T20:36:09.977Z (14 days ago)
- Topics: curved, javascript, polygon, polygons, svg
- Language: JavaScript
- Homepage:
- Size: 125 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- License: LICENSE
Awesome Lists containing this project
README
# curved-polygon: A tiny library for creating regular polygons with rounded corners in SVG
[](https://observablehq.com/@shreshthmohan/curved-polygon)
## Installation
For legacy environments (UMD bundle), direct usage in the browser
```
```
As an npm package
```
npm install curved-polygon
```
## `roundedPolygonByCircumRadius(options)`
`options` properties
- `circumRadius` (number, required) size of the polygon, contained inside a circle of this provided value
- `[borderRadius]` (number, default = 0, optional) radius of the curved polygon corner
- `[sideCount]` (number, default = 3, optional) number of polygon sides
- `[cx]` (number, default = 0, optional) polygon center x position
- `[cy]` (number, default = 0, optional) polygon center y position
- `[rotate]` (number, default = 0, optional) rotation angle in degrees
### Usage (circumradius):
```
import { roundedPolygonByCircumRadius } from 'curved-polygon'
const pathStringC = roundedPolygonByCircumRadius({
circumRadius: 200,
sideCount: 5,
borderRadius: 10,
cx: 150,
cy: 150,
rotate: 15,
})
// "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"
// set this to the "d" attribute of a SVG element
```
### return value
The return value is an **object** with the following properties:
- `d` (string) SVG path string to be used as a value to the `d` attributes of a `` element
- `meta` (object) contains helpful values: `sideLength`, `circumRadius`, `inRadius`, `minSideLength`, and `borderRadius`
- `warnings` (an array of strings)
- `errors` (an array of strings)
## `roundedPolygonBySideLength(options)`
`options` properties
- `circumRadius` (number, required) size of the polygon, contained inside a circle of this provided value
- `[borderRadius]` (number, default = 0, optional) radius of the curved polygon corner
- `[sideCount]` (number, default = 3, optional) number of polygon sides
- `[cx]` (number, default = 0, optional) polygon center x position
- `[cy]` (number, default = 0, optional) polygon center y position
- `[rotate]` (number, default = 0, optional) rotation angle in degrees
### Usage (side length):
```
import { roundedPolygonBySideLength } from 'curved-polygon'
const pathStringS = roundedPolygonBySideLength({
sideLength: 200,
sideCount: 5,
borderRadius: 10,
cx: 150,
cy: 150,
rotate: 90,
})
// "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"
// set this to the "d" attribute of a SVG element
```
### return value
The return value is an **object** with the following properties:
- `d` (string) SVG path string to be used as a value to the `d` attributes of a `` element
- `meta` (object) contains helpful values: `sideLength`, `circumRadius`, `inRadius`, `minSideLength`, and `borderRadius`
- `warnings` (an array of strings)
- `errors` (an array of strings)
## Demos
- [Codepen (UMD)](https://codepen.io/shreshthmohan/pen/mdpqaPY)
- [Observable - Interactive](https://observablehq.com/@shreshthmohan/curved-polygon)