squirclify

1.0.2 • Public • Published

Can i use css clip-path License: GPL v3

logo

What is it

Squirclify.js - microlibrary for creating smooth corners from any div, based on its border-radius size.

It imitates 100% smoothing corners at Figma:

corner smoothing

CodeSandbox example

Result

corner smoothing

How to use

1. Vanilla javascript

import { squirclify } from "squirclify";
 
squirclify(document.getElementById("squircle"));
 
<div className="squircle" id="squircle">
    <div className="ugly-child-wrapper">
        Lorem ipsum dolor sit amet
    </div>
</div>;

2. React.js

import { Squircle } from "squirclify";
 
<Squircle className="squircle">
    <div className="ugly-child-wrapper">
        Lorem ipsum dolor sit amet
    </div>
</Squircle>

Known restrictions

  • It only imitates 100% corner smoothing.
  • Squircle will not recalculate when the viewport width changes by default. This is done on purpose, assuming that in most cases users do not resize the viewport. But you can add your own handler on viewport width changing.
  • There is a bug in Safari on Mac OS due to which the clip-mask is applied without considering paddings and margins, therefore it is necessary to wrap squirclified content with another <div> to which you need to apply margins/paddings.

Known issues

  • Squircle radius can became greater than border radius

Package Sidebar

Install

npm i squirclify

Weekly Downloads

2

Version

1.0.2

License

GPLv3

Unpacked Size

75.7 kB

Total Files

10

Last publish

Collaborators

  • tim-mukhin