https://github.com/quadflask/react-superellipse

🟦 Superellipse or squircle mask for react component
https://github.com/quadflask/react-superellipse

curve react smooth squircle superellipse svg

Last synced: 5 months ago
JSON representation

🟦 Superellipse or squircle mask for react component

• Host: GitHub
• URL: https://github.com/quadflask/react-superellipse
• Owner: QuadFlask
• License: mit
• Created: 2020-04-01T16:18:34.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T18:14:16.000Z (over 2 years ago)
• Last Synced: 2025-04-20T06:05:35.375Z (6 months ago)
• Topics: curve, react, smooth, squircle, superellipse, svg
• Language: TypeScript
• Homepage: https://quadflask.github.io/react-superellipse/
• Size: 3.13 MB
• Stars: 38
• Watchers: 1
• Forks: 2
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
react-superellipse [![npm version](https://badge.fury.io/js/react-superellipse.svg)](https://badge.fury.io/js/react-superellipse)

-----

[example](https://quadflask.github.io/react-superellipse/)

![](https://raw.githubusercontent.com/QuadFlask/react-superellipse/master/example/example.png)

## What is this?

React component for create [Superellipse](https://en.wikipedia.org/wiki/Superellipse) (or [Squircle](https://en.wikipedia.org/wiki/Squircle)) mask using svg and css `mask-image` attribute.

iOS app icon is Squircle and KakaoTalk profile is Superellipse shape.

## example

```tsx

import SuperEllipse from "react-superellipse";

    {/* children */}

    {/* children */}

// or using preset

import {Preset} from "react-superellipse";

// preset for iOS squircle or Kakaotalk superellipse

    {/* children */}

```

## component

### `SuperEllipse`

> Wrapper div component

```ts

interface SuperEllipseProps {

    style?: CSSProperties;

    r1?: number; // [0 ~ 0.5] width ratio

    r2?: number; // [0 ~ 0.5] width ratio

    p1?: number; // [0 ~ width/2] in pixel

    p2?: number; // [0 ~ width/2] in pixel

}

```

> r1,r2 or p1,p2 

### `SuperEllipseImg`

```ts

export interface SuperEllipseImgProps {

    width: number;

    height: number;

    href: string;

    style?: CSSProperties;

    r1?: number;

    r2?: number;

    backgroundColor?: string;

    strokeColor?: string;

    strokeWidth?: number;

}

```