Squirkle

A squirkle, or superellipse, is a geometric shape that generalizes the concept of an ellipse with smoother transitions between rectangular and circular forms.

The subtly distinctive "squircle" shape feels more organic and comfortable to the eye than sharp corners or simple circular rounding. They appear more natural and less harsh than standard rounded rectangles while maintaining clear boundaries and efficient space usage. This makes them particularly valuable for creating interfaces that feel both modern and approachable.

Popularized by Apple’s iOS design, superellipses gained significance in UX/UI design due to visual psychology striking an optimal balance between the geometric precision of rectangles. The organic feel of circles provides a visually pleasing alternative to standard rounded rectangles.

Use in vector sets, buttons, card layouts, image frames, and interactive elements to provide a sophisticated, premium aesthetic that enhances UX through subtle visual refinement.

Squirkle shape generator component renders a customizable squirkle (superellipse) as a vector SVG shape in a fixed 1:1 ratio.

COMPONENT CONTROLS:

Shape Controls:

• Smoothness (0-100%): Controls the roundness of the squirkle. 0% creates a more rectangular shape, 100% creates a very rounded shape.

• Radius (0-100px): Sets the corner radius of the squirkle shape.

Fill Controls:

• Fill Type: Choose between "Solid", "Gradient", or "Radial Gradient"

• Solid: Uses a single color fill - Color picker.

• Gradient: Creates a linear gradient with customizable colors and angle.

• Radial Gradient: Creates a radial gradient with multiple color stops.

• Image: Upload or add an image fill.

Shadow Controls:

• Shadow: Toggle to enable/disable drop shadow

• Shadow Color: Color of the drop shadow

• Shadow Blur: Blur radius of the shadow (0-50px)

• Shadow X/Y: Horizontal and vertical offset of the shadow (-50 to 50px)

Stroke Controls:

• Stroke: Toggle to enable/disable stroke (renders inside the shape)

• Stroke Color: Color of the stroke

• Stroke Width: Thickness of the stroke (0-10px)

Blur Effects:

• Blur: Toggle to enable/disable blur effect on the entire shape.

• Blur Amount: Intensity of the blur effect (0-20px)

• Backdrop Blur: Toggle to enable/disable backdrop blur (blurs content behind the shape)

• Backdrop Blur Amount: Intensity of the backdrop blur (0-10px)

FRAMER INTRINSIC SETTINGS:

• Width: Set to any - will always maintain 1:1 ratio

• Height: Set to any - will always maintain 1:1 ratio

• Intrinsic Width: 200px - Default width when first added to canvas

• Intrinsic Height: 200px - Default height when first added to canvas

Size Behavior:

The component's size is controlled by Framer's layout system:

• Drag the resize handles in the canvas to change dimensions

• Use the width/height inputs in the layout panel.

• The SVG shape will scale proportionally to fill the component's bounds.

• The shape maintains its 1:1 aspect ratio and remains centered within the component

Performance Notes:

• The component uses SVG for crisp rendering at any scale.

• Backdrop blur may impact performance on lower-end devices.

• Complex radial gradients with many stops may affect rendering speed.