Shapes

SwiftUI comes with a set of built-in shapes ready to draw. This app puts them all on screen so you can see what each one looks like and what you can do with them.

What you'll build

A collection of shapes displayed on screen — circles, rectangles, rounded rectangles, capsules — each styled differently with fills, strokes, and colors.

Key concepts

Built-in shapes — SwiftUI provides Circle, Rectangle, RoundedRectangle, Capsule, Ellipse, and Path. Each is a view you can size and style like any other.

Circle()
    .fill(.orange)
    .frame(width: 100, height: 100)

.fill() vs .stroke() — .fill() colors the inside; .stroke() draws an outline.

RoundedRectangle(cornerRadius: 16)
    .stroke(.blue, lineWidth: 3)
    .frame(width: 200, height: 80)

Combining fill and stroke — Use .strokeBorder() on shapes that support it, or layer two shapes with ZStack.

Capsule()
    .fill(.mint)
    .overlay(
        Capsule().stroke(.teal, lineWidth: 2)
    )

LazyVGrid — Arrange the shapes in a grid so you can see them all at once.

Shapes are views

In SwiftUI, shapes aren't a special drawing primitive — they're regular views. You can add them to any layout, animate them, clip other views with them, and use them anywhere a view is expected.

Download and run it

Open the Playgrounds file from GitHub, hit Run, and draw some shapes.