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. |