SmoothRoundedRectangle

Overview

A custom SwiftUI shape which mimics Figma's smooth corner rounding for rectangles. The smoothness value can be anything between 0 to 1, 0 with completely circular corner radius and 1 with full smoothness. Corners to which rounding has to be applied can be specified as well. The amount of rounding can be even more than half of the smaller dimension of rectangle just like in Figma.

Detail explanation

Article: Parametric corner smoothing in SwiftUI

Usage

Below are few examples:

Uniform radii on all corners with custom smoothing

SmoothRoundedRectangle(radius: 80, style: .smooth(1))
    .fill(.cyan)
    .frame(width: 240, height: 240)

Uniform radii on selected corners

SmoothRoundedRectangle(radius: 80, corners: [.topLeading, .bottomTrailing])
    .fill(.green)
    .frame(width: 240, height: 80)

Different radii on different corners

SmoothRoundedRectangle(
    topLeadingRadius: 80,
    bottomLeadingRadius: 80,
    bottomTrailingRadius: 20,
    topTrailingRadius: 20,
    style: .continuous
)
.frame(width: 240, height: 120)

Using inside clipShape

ContentView()
    .clipShape(SmoothRoundedRectangle(radius: 12, style: .continues))

Results and comparison

A comparison of zero smoothness and 70%.

The indigo corner has 70% smoothing and the green one has no smoothing.

A comparison of different smoothnesses and comparison with Figma's smoothness.