# squircle.js

> Squircles for web

Latest version **1.0.1** (published 2022-11-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install squircle.js
pnpm add squircle.js
yarn add squircle.js
bun add squircle.js
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-11-09 |
| First published | 2021-02-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 792.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | jhaemin |
| Maintainers | jhaemin |

## Links

- npm: https://www.npmjs.com/package/squircle.js
- Repository: https://github.com/payw-org/squircle.js
- Homepage: https://github.com/payw-org/squircle.js#readme
- Issues: https://github.com/payw-org/squircle.js/issues
- npm.io page: https://npm.io/package/squircle.js

## Dependencies (1)

- [@juggle/resize-observer](https://npm.io/package/@juggle/resize-observer.md) ^3.2.0

## Recent versions

- 1.0.1 (latest) — 2022-11-09
- 1.0.0 — 2021-02-19
- 0.3.0 — 2021-02-18
- 0.2.0 — 2021-02-18
- 0.1.0 — 2021-02-18

## README

<p align="center">
  <img src="./images/banner.png" width="500" />
</p>

<h3 align="center">Squircles for web</h3>

<p align="center">
  <a href="https://www.npmjs.com/package/squircle.js">
    <img alt="npm" src="https://img.shields.io/npm/v/squircle.js?color=FF7B3F">
  </a>
</p>

## What is a squircle?

A squircle is a shape intermediate between a square and a circle. There are at least two definitions of "squircle" in use, the most common of which is based on the superellipse. The word "squircle" is a portmanteau of the words "square" and "circle". Squircles have been applied in design and optics. — [Wikipedia](https://en.wikipedia.org/wiki/Squircle)

<p align="center">
  <img src="./images/difference.png" width="600" />
</p>

## Why squircle.js?

In CSS, currently there is no such a spec for making squircles yet, and apparently it's not possible with just `border-radius`. The most common solution to implement squircles in web is to mask elements with a squircle image or an SVG path like this [page](https://apps.apple.com/kr/app/%EB%B0%B0%EB%8B%AC%EC%9D%98%EB%AF%BC%EC%A1%B1/id378084485). Unfortunately these static masks are unchangeable and doesn't work responsively. You have to manually create an image or generate one using some [tools](https://squircley.app) every time you need.

**squircle.js** automatically and dynamically generates squircle SVG paths based on the element's size and its border radius.

<p align="center">
  <img src="./images/motion.gif" width="300" />
</p>

## Installation

```zsh
npm i squircle.js
```

## API

```ts
import { squirclify } from 'squircle.js'

const toBeSquircles = document.querySelectorAll('.squircle')

squirclify(Array.from(toBeSquircles))
```

### TypeScript

It has built-in types since it is totally written in TypeScript.

## Limitations

- It uses `SVGElement`. [Checkout browser compatibility](https://caniuse.com/?search=svg).
- It uses CSS `clip-path`. [Checkout browser compatibility](https://caniuse.com/?search=clip-path).
- Don't apply squircle to an element that resizes too many times.

## To Do

- [ ] Demo website
- [ ] React
- [ ] Vue
- [ ] Svelte
- [ ] Garbage collect unused masks
- [ ] Unobserve removed DOMs

## License

[MIT](./LICENSE)

---
_Source: https://npm.io/package/squircle.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._