Drawing basic shapes in SwiftUI

Simple circles and rectangles can become backgrounds, dividers, and button surfaces. Applying the same modifiers to different shapes makes the distinction between a fill and an outline clear.

Shape properties

Modifiers control how a shape is filled, stroked, and displayed.

Circle()
	.fill(Color.green) // Green
    .foregroundColor(.pink) // Pink
    .stroke() // Stroke
    .stroke(Color.red) // Red stroke
    .stroke(Color.blue, lineWidth: 20) // Blue stroke with a width of 20
    .stroke(Color.orange, style: StrokeStyle(lineWidth: 30), lineCap: .round, dash: [30])) // Orange dashed stroke with round caps, width 30, dash length 30
    .trim(from: 0.2, to: 1.0) // Trim the path from 0.2 through 1.0
    .frame(width: 200, height: 100) // Set a width of 200 and height of 100

Shape types

Built-in shapes share the same core shape modifiers, so a similar styling approach works across circles, rectangles, capsules, and other shapes.

Circle() // Circle
Ellipse() // Ellipse
Capsule(style: .circular) // Capsule
Capsule(style: .continuous) // Capsule with continuous corners
Rectangle() // Rectangle
RoundedRectangle(cornerRadius: 16) // Rounded rectangle