squircle.js

Squircles for web

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

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. Unfortunately these static masks are unchangeable and doesn't work responsively. You have to manually create an image or generate one using some tools every time you need.

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

Installation

npm i squircle.js

API

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.
• It uses CSS clip-path. Checkout browser compatibility.
• 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