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 (like border-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.