Create Organic Designs with Superellipses
Why use Squircles?
Standard rounded corners (border-radius) can feel harsh because the transition from straight line to curve is abrupt.Squircles (Superellipses) solve this by using G2-continuous curves, creating a specialized shape that feels more natural and organic—famously used by Apple in iOS icons and hardware.
- Mathematically PerfectGenerate true superellipses with adjustable curvature smoothing.
- Production ReadyExport as optimized SVG or CSS Mask for immediate use in your projects.
- Modern DesignEmulate the premium feel of iOS and modern hardware design.
G2 Continuity Explained
In vector graphics, continuity describes how two curves meet.G0 means they touch. G1 means they share a tangent direction (standard border-radius).
G2 Continuity means the rate of curvature change is also smooth. This eliminates the microscopic "bump" where the straight line meets the corner, resulting in a shape that looks perfectly smooth to the human eye.
SVG vs CSS Mask
SVG is best for icons and standalone graphics. It provides the highest fidelity and is vector-based.
CSS Mask (Houdini) is ideal for containers, images, and buttons. It allows you to apply the squircle shape to any HTML element without changing markup, maintaining semantic structure.