Svelte Squircle
A Svelte component for creating smooth, rounded shapes (squircles/superellipses).
svelte-squircle
A Svelte component for creating smooth, rounded shapes (squircles/superellipses).
Installation
npm install svelte-squircle
# or
pnpm add svelte-squircle
# or
yarn add svelte-squircle
Usage
<script>
import { Squircle } from 'svelte-squircle';
</script>
<Squircle
cornerRadius={16}
cornerSmoothing={0.6}
style="background: red; color: white; padding: 1rem 2rem;"
>
Click me!
</Squircle>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cornerRadius |
number | undefined |
undefined |
The radius of the corners in pixels |
cornerSmoothing |
number |
0.6 |
The smoothing factor (0-1). Higher = smoother, more "squircle-like" |
style |
string | Record<string, string> | undefined |
undefined |
Additional styles to apply to the element |
How It Works
The component uses CSS clip-path with an SVG path generated by figma-squircle to create smooth, iOS-style rounded corners. The shape automatically adjusts to the element's size, or you can specify fixed dimensions.
Corner Smoothing
The cornerSmoothing prop controls how "squircle-like" the corners are:
0: Standard circular corners (likeborder-radius)0.6: Figma's default (recommended)1: Maximum smoothing (true superellipse)
Browser Support
Works in all modern browsers that support CSS clip-path with path syntax.
Credits
Built with figma-squircle by Tien Pham.
