https://github.com/taep96/squircle-path
Generate squircle paths
https://github.com/taep96/squircle-path
library path squircle svg typescript
Last synced: 5 months ago
JSON representation
Generate squircle paths
- Host: GitHub
- URL: https://github.com/taep96/squircle-path
- Owner: taep96
- License: mit
- Created: 2023-12-30T01:00:36.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-23T12:58:01.000Z (about 2 years ago)
- Last Synced: 2025-08-17T23:20:05.566Z (10 months ago)
- Topics: library, path, squircle, svg, typescript
- Language: TypeScript
- Homepage: https://taep96.moe/projects/squircle-path
- Size: 57.6 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# squircle-path
[![license][license badge]][license link]
[![npm package][npm badge]][npm link]
[![github stars][stars badge]][stars link]
[![follow taep96 on x][x badge]][x link]
[license badge]: https://img.shields.io/github/license/taep96/squircle-path?style=for-the-badge&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1zY2FsZSI%2BPHBhdGggZD0ibTE2IDE2IDMtOCAzIDhjLS44Ny42NS0xLjkyIDEtMyAxcy0yLjEzLS4zNS0zLTFaIi8%2BPHBhdGggZD0ibTIgMTYgMy04IDMgOGMtLjg3LjY1LTEuOTIgMS0zIDFzLTIuMTMtLjM1LTMtMVoiLz48cGF0aCBkPSJNNyAyMWgxMCIvPjxwYXRoIGQ9Ik0xMiAzdjE4Ii8%2BPHBhdGggZD0iTTMgN2gyYzIgMCA1LTEgNy0yIDIgMSA1IDIgNyAyaDIiLz48L3N2Zz4%3D&logoColor=white&labelColor=black&color=white
[npm badge]: https://img.shields.io/npm/v/%40taep96%2Fsquircle-path?style=for-the-badge&logo=npm&labelColor=black&color=white
[stars badge]: https://img.shields.io/github/stars/taep96/squircle-path?style=for-the-badge&logo=github&labelColor=black&color=white
[x badge]: https://img.shields.io/twitter/follow/taep96?style=for-the-badge&logo=x&labelColor=black&color=%230000
[license link]: https://github.com/taep96/squircle-path/blob/main/LICENSE
[npm link]: https://www.npmjs.com/package/@taep96/squircle-path
[stars link]: https://github.com/taep96/squircle-path/stargazers
[x link]: https://twitter.com/intent/follow?screen_name=taep96
## Installation
```sh
bun install @taep96/squircle-path
```
## Usage
```tsx
import { squirclePath } from "@taep96/squircle-path";
const squircle = squirclePath({ width: 256, height: 256, squareness: 0.5 });
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
```
## Options
| Name | Type | Default | Description |
| ---------- | ------- | ------- | ---------------------------------------------------------------------------------- |
| width | number | | Width of the squircle |
| height | number | | Height of the squircle |
| squareness | number? | 0.3 | Squareness of the squircle. 0 is a circle, 1 is a square, 0.5 is a perfect squircle |