Squircle React SVG Mask
Description
React component for create Superellipse (or Squircle) mask using svg and css mask-image attribute.
Installation
npm install @biptik/squircle
Usage
It couldn't be easier!
import Squircle from "@biptik/squircle";
<Squircle style={{ width: 64, height: 64 }}>{/* <img /> */}</Squircle>;Props
| prop | type | default | description |
|---|---|---|---|
| ratio1 | number | 0.0586 | [0 ~ 0.5] width ratio |
| ratio2 | number | 0.332 | [0 ~ 0.5] width ratio |
| pixelRatio1 | number | [0 ~ width/2] in pixel | |
| pixelRatio2 | number | [0 ~ width/2] in pixel | |
| children | ReactNode | ex.: image, etc. |