Squircle

An SVG filter component for creating squircle (superellipse) shapes using CSS filters.

Powered by

Installation


pnpm dlx pitsi@latest add squircle

Usage

Spinner Switch

On This Page

Installation Usage Basic Usage Dynamic Filter How It Works Components SquiCircleFilterStatic SquiCircleFilter Props SquiCircleFilter Examples Card with Squircle Shape Button with Squircle Shape Image with Squircle Mask Notes

The Squircle component provides an SVG filter that can be applied to any element to create smooth, squircle-shaped corners.

Basic Usage

import { SquiCircleFilterStatic } from "@/components/ui/squircle"

// Add the filter to your layout (only once)
<SquiCircleFilterStatic />
 
// Apply the filter to any element
<div
  className="bg-primary h-32 w-32"
  style={{ filter: "url(#SkiperSquiCircleFilterLayout)" }}
/>

Dynamic Filter

For adjustable squircle parameters:

import { SquiCircleFilter } from "@/components/ui/squircle"

<SquiCircleFilter
  blurValue={10}
  colorMatrixValue={20}
  alphaValue={-7}
/>
 
<div
  className="bg-primary h-32 w-32 rounded-2xl"
  style={{ filter: "url(#SquiCircleFilter)" }}
/>

How It Works

The Squircle effect is created using SVG filters:

Gaussian Blur: Blurs the element edges
Color Matrix: Enhances contrast to sharpen the blur into a smooth shape
Blend: Combines the filtered result with the original element

The result is a smooth, organic shape that's somewhere between a circle and a square - a squircle!

Components

SquiCircleFilterStatic

A static filter with predefined values. Best for consistent squircle shapes across your application.

SquiCircleFilter

A customizable filter that accepts parameters for fine-tuning the squircle effect.

Props

SquiCircleFilter

Prop	Type	Default	Description
`blurValue`	`number`	`10`	Amount of blur applied (0-50)
`colorMatrixValue`	`number`	`20`	Contrast enhancement (1-50)
`alphaValue`	`number`	`-7`	Alpha channel adjustment (-20 to 0)

Examples

Card with Squircle Shape

<SquiCircleFilterStatic />
 
<div
  className="bg-card p-6 shadow-lg"
  style={{ filter: "url(#SkiperSquiCircleFilterLayout)" }}
>
  <h3>Card Title</h3>
  <p>Card content with smooth squircle corners.</p>
</div>

Button with Squircle Shape

<button
  className="bg-primary text-primary-foreground px-6 py-3"
  style={{ filter: "url(#SkiperSquiCircleFilterLayout)" }}
>
  Click Me
</button>

Image with Squircle Mask

<img
  src="/image.jpg"
  alt="Squircle image"
  className="h-64 w-64 object-cover"
  style={{ filter: "url(#SkiperSquiCircleFilterLayout)" }}
/>

Notes

Add the filter component once in your layout or root component
Apply the filter to elements using the filter CSS property
The filter works best with elements that have a solid background
Adjust blurValue, colorMatrixValue, and alphaValue to fine-tune the squircle shape
Higher blurValue creates rounder shapes
Higher colorMatrixValue sharpens the edges
alphaValue controls the edge softness (more negative = softer edges)

"use client"

import React from "react"

// to use the filter just add this to your layout.tsx
// <SkiperSquiCircleFilterLayout/>
// {children}

// on element you need to add squicircle just add the filter id SkiperSquiCircleFilter
//<div style={{filter: "url(#SquiCircleFilter)"}}></div>

// thats it you can use the filter now no extra rerenders no complications just pure css filter

export const SquiCircleFilterStatic = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="absolute bottom-0 left-0"
      version="1.1"
    >
      <defs>
        <filter id="SkiperSquiCircleFilterLayout">
          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
          <feColorMatrix
            in="blur"
            mode="matrix"
            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -7"
            result="goo"
          />
          <feBlend in="SourceGraphic" in2="goo" />
        </filter>
      </defs>
    </svg>
  )
}

const Skiper63 = () => {
  return (
    <div className="flex h-full w-full flex-col items-center justify-center">
      <SquiCircleFilter />
      <div
        className="bg-foreground rounded-2xl"
        style={{
          height: "200px",
          width: "300px",
          filter: "url(#SquiCircleFilter)",
        }}
      />
    </div>
  )
}

export { Skiper63 }

const SquiCircleFilter = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="absolute bottom-0 left-0"
      version="1.1"
    >
      <defs>
        <filter id="SquiCircleFilter">
          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
          <feColorMatrix
            in="blur"
            mode="matrix"
            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -7"
            result="goo"
          />
          <feBlend in="SourceGraphic" in2="goo" />
        </filter>
      </defs>
    </svg>
  )
}