react-superellipse

example

What is this?

React component for create Superellipse (or Squircle) mask using svg and css mask-image attribute.

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

example

import SuperEllipse from "react-superellipse";

<SuperEllipse r1={0.2} r2={0.5} style={{width: 64, height: 64}}>
    {/* children */}
</SuperEllipse>

<SuperEllipse p1={10} p2={32} style={{width: 64, height: 64}}>
    {/* children */}
</SuperEllipse>


// or using preset

import {Preset} from "react-superellipse";
// preset for iOS squircle or Kakaotalk superellipse

<SuperEllipse r1={Preset.iOS.r1} r2={Preset.iOS.r2} style={{width: 64, height: 64}}>
    {/* children */}
</SuperEllipse>

component

SuperEllipse

Wrapper div component

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

export interface SuperEllipseImgProps {
    width: number;
    height: number;
    href: string;
    style?: CSSProperties;
    r1?: number;
    r2?: number;
    backgroundColor?: string;
    strokeColor?: string;
    strokeWidth?: number;
}