# Creating Shapes in SwiftUI

{% hint style="success" %}
[**Source Code**](https://github.com/ivansaul/SwiftUI-Cookbook/blob/master/src/SwiftUICookbook/SwiftUICookbook/ShapesSwiftUI.swift) <img src="/files/dlykackBgGW8J1PA46y5" alt="" data-size="original">
{% endhint %}

SwiftUI provides a robust set of tools for creating and customizing shapes in your app. Shapes like `Circles`, `Ellipse`, `Rectangle`, `Capsule`, and `RoundedRectangle` can be easily added to your views, making it simple to create visually appealing designs. This guide will walk you through the basics of adding these shapes and customizing their appearance.

## Creating Basic Shapes

### Circle

The `Circle` shape is straightforward to create and use. Here's an example:

```swift
import SwiftUI

struct ShapesSwiftUI: View {
    var body: some View {
        Circle()
            .frame(width: 200, height: 200)
    }
}
```

In this example, we create a `Circle` shape and set its frame to 200x200 points.

<figure><img src="/files/QuMzWo3xsOK47xranQQT" alt=""><figcaption></figcaption></figure>

### Ellipse

The `Ellipse` shape can be created similarly, and it automatically adjusts its aspect ratio based on the frame provided:

```swift
struct ShapesSwiftUI: View {
    var body: some View {
        Ellipse()
            .frame(width: 300, height: 200)
    }
}
```

This code snippet creates an ellipse with a width of 300 points and a height of 200 points.

<figure><img src="/files/QmiBKBzRtsaeWOKRnsmw" alt=""><figcaption></figcaption></figure>

### Rectangle

Creating a rectangle is just as simple:

```swift
struct ShapesSwiftUI: View {
    var body: some View {
        Rectangle()
            .frame(width: 300, height: 200)
    }
}
```

Here, a `Rectangle` shape is created with specified dimensions.

<figure><img src="/files/f1kZC7WISnV7q4lftDtY" alt=""><figcaption></figcaption></figure>

### Rounded Rectangle

A `RoundedRectangle` shape allows you to set the corner radius for rounded corners:

```swift
struct ShapesSwiftUI: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 30)
             .frame(width: 300, height: 200)
    }
}
```

This creates a rectangle with rounded corners, where the corner radius is set to 30 points.

<figure><img src="/files/VHEFDk0gRsoppgn90Nnk" alt=""><figcaption></figcaption></figure>

## Customizing Shapes

Shapes in SwiftUI can be customized with various modifiers to change their appearance.

### Fill

You can fill a shape with a color or add a stroke (border):

```swift
struct ShapesSwiftUI: View {
    var body: some View {
        Circle()
            .fill(.blue)
            .frame(width: 300, height: 300)
    }
}
```

<figure><img src="/files/qOyc9zJPoj6BMVrYNmLL" alt=""><figcaption></figcaption></figure>

### Stroke

```swift
struct ShapesSwiftUI: View {
     var body: some View {
         Circle()
             .stroke(.red, lineWidth: 20)
             .frame(width: 300, height: 300)
     }
}
```

The first example fills the circle with red, and the second adds a red stroke to the rectangle.

<figure><img src="/files/Hl3tdbUW2XcyOpgdABpA" alt=""><figcaption></figcaption></figure>

### Shadow

You can adjust the opacity and add a shadow to shapes:

```swift
struct ShapesSwiftUI: View {
    var body: some View {
        Ellipse()
            .fill(Color.green)
            .frame(width: 300, height: 200)
            .shadow(color: .blue, radius: 10, x: 0, y: 15))
    }
}
```

This example creates an ellipse with blue fill, and a shadow.

<figure><img src="/files/URYBJwxY3Qausb1Q2Tv2" alt=""><figcaption></figcaption></figure>

### Gradient Fills

SwiftUI also supports gradient fills for shapes:

```swift
struct ShapesSwiftUI: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .fill(
                LinearGradient(
                    gradient: Gradient(colors: [.blue, .orange]),
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                )
            )
            .frame(width: 300, height: 200)
    }
}
```

Here, we apply a linear gradient to a rounded rectangle.

<figure><img src="/files/32UYNJCupjSC3UvyzRuk" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ivansaul.gitbook.io/swiftui-cookbook/swiftui/readme/creating-shapes-in-swiftui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.