# Custom Shapes in SwiftUI

Nov 13, 2023

Have you ever used `Rectangle()`, `RoundedRectangle(cornerRadius: _)`, `Circle()` or `Capsule()` for layout in SwiftUI? The answer is likely Yes.

It is because they are so convenient to use. But have you ever wonder what they are actually? Are they just normal View? The answer is NO, they are Shape.

## Shape Protocol

In SwiftUI, Shape refers to a protocol that defines the outline of a view or control. It's a fundamental concept for drawing and designing custom views or controls with different shapes. The Shape protocol is part of the SwiftUI framework, which is used to create user interfaces in a declarative manner.

The Shape protocol has one required method:

``func path(in rect: CGRect) -> Path``

This method is used to create a path that defines the outline of the shape within the given rectangle. The Path type is used to describe a series of lines and curves that form the shape's boundary.

As you can see this function has only 1 parameter which is a `CGRect`. This is the space that will be available for us to draw. This `CGRect` specifies the area where the shape is to be rendered.

This is a 2 dimensional space so to identify the position of one point we need a x-value and a y-value. Sounds familiar, isn't it? But there is a catch here.

In context if Swift, the origin point(0, 0) will be at the top left corner. This will be different from what we learned in Mathematics about the Descartes coordinate system, but that is the way. Take a look at the picture:

As we move the right, the x-value will increase and as we move down the y-value will increase. Let's take this knowledge to practice starting with some basic geometry shape.

## Drawing Custom Shapes

### Triangle

You can conform to the Shape protocol to create custom shapes, and you can use these custom shapes in SwiftUI views to draw, fill, or stroke them as needed.

Let's first create a custom Triangle. Let's make a struct Triangle that conform to Shape protocol:

``````struct Triangle: Shape {
func path(in rect: CGRect) -> Path {
var trianglePath = Path()
return trianglePath
}
}``````

This function need to return a `Path`, so we declare, initialize and return it. For now nothing will happen, it is because we haven't drawn anything.

The first method we want to introduce with `Path` is `move(to end: CGPoint)`, this will mark the position where our path start. We will start draw at the middle point on the top:

``````var trianglePath = Path()
trianglePath.move(to: CGPoint(x: rect.midX, y: rect.minY))
return trianglePath``````

Next, we will use `addLine(to end: CGPoint)`, this method appends a straight line segment from the current point to the specified point. Now from our starting point, we will add line to the bottom trailing point, then draw to bottom leading point and from there back to our original middle top point:

``````var trianglePath = Path()
trianglePath.move(to: CGPoint(x: rect.midX, y: rect.minY))
return trianglePath``````

We can now use our `Triangle`:

``````struct ContentView: View {
var body: some View {
HStack {
Triangle()
.frame(width: 300, height: 300)
}
}
}``````

Result:

With this triangle, let's do some fun things by apply some modifiers to it:

``````struct ContentView: View {
let colors: [Color] = [.red, .orange, .yellow, .green, .blue, .teal, .indigo, .mint]

var body: some View {
VStack {
ForEach(0...3, id: \.self) { _ in
HStack(spacing: 10) {
ForEach(0...3, id: \.self) { _ in
Triangle()
.fill(colors.randomElement() ?? .primary)
.frame(width: 50, height: 50)
}
}
}
}
}
}``` ```

Using the `fill` view modifier, we change change color of a `Shape`. Here, we create a four by four triangle board and fill them randomly from our set of colors:

Or stroking them using `stroke` view modifier:

``````struct ContentView: View {
let colors: [Color] = [.red, .orange, .yellow, .green, .blue, .teal, .indigo, .mint]

var body: some View {
VStack {
ForEach(0...3, id: \.self) { _ in
HStack(spacing: 10) {
ForEach(0...3, id: \.self) { _ in
Triangle()
.stroke(colors.randomElement() ?? .primary, lineWidth: 2.0)
.frame(width: 50, height: 50)
}
}
}
}
}
}``````

Result:

Be creative:

``````struct ContentView: View {
let colors: [Color] = [.red, .orange, .yellow, .green, .blue, .teal, .indigo, .mint]

var body: some View {
ZStack {
ForEach(0...30, id: \.self) { index in
Triangle()
.stroke(colors.randomElement() ?? .primary, lineWidth: 2.0)
.frame(width: 350 - CGFloat((index * 10)), height: 350 - CGFloat((index * 10)))
}
}
}
}``````

Result:

Magnificent, isn't it! With just some simple lines of code we have created. To me this really show the power of SwiftUI and declarative programming.

Let's be more artistic here by adding another modifier: `rotationEffect(_ angle: Angle, anchor: UnitPoint = .center)`. This modifier will rotate the view’s rendered output around the specified point in 2 dimensional space.` `

``````struct ContentView: View {
let colors: [Color] = [.red, .orange, .yellow, .green, .blue, .teal, .indigo, .mint]

var body: some View {
ZStack {
ForEach(0...30, id: \.self) { index in
Triangle()
.stroke(colors.randomElement() ?? .primary, lineWidth: 2.0)
.frame(width: 350 - CGFloat((index * 10)), height: 350 - CGFloat((index * 10)))
.rotationEffect(.degrees(Double(index)))
}
}
}
}``````

Result:

With SwiftUI, we can just keep adding view modifier after each other. Let's twist this with `offset(x: CGFloat = 0, y: CGFloat = 0)`

``````struct ContentView: View {
let colors: [Color] = [.red, .orange, .yellow, .green, .blue, .teal, .indigo, .mint]

var body: some View {
ZStack {
ForEach(0...30, id: \.self) { index in
Triangle()
.stroke(colors.randomElement() ?? .primary, lineWidth: 2.0)
.frame(width: 350 - CGFloat((index * 10)), height: 350 - CGFloat((index * 10)))
.rotationEffect(.degrees(Double(index)))
.offset(x: CGFloat(index * -3), y: CGFloat(index * -10))
}
}
}
}``````

Result:

We are Picasso now. To this point, we hope you recognize the power of SwiftUI and Shape. We can easily reuse our shape: use it as a View, a background or for decorations.

Now let's review what we just learn by drawing a more complicated Shape: a Flower.

### Flower

Recently, we took a chance with the inspiration from the Flowers Festival in Vietnam to draw some different types of Flowers.

Let's draw this beautiful yellow daisy flower:

Now to draw this Flower Custom Shape, we separated them into 2 component: the Pistil and the Petal. The Pistil is simple here with Circle Shape. But its Petal is where we need to make a Custom Shape. And it is easy in SwiftUI.

Let's make our custom DaisyPental:

``````struct DaisyPental: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: rect.minX, y: rect.midY))
path.addArc(center: CGPoint(x: rect.maxX, y: rect.midY), radius: rect.maxX*(1/11), startAngle: .degrees(90), endAngle: .degrees(270), clockwise: true)
return path
}
}``````

We have learned about `move(to end: CGPoint)`, here we will start at the middle left point. Then the new method we use here `addArc(center: CGPoint, radius: CGFloat, startAngle: Angle, endAngle: Angle, clockwise: Bool)` which will add an arc of a circle to the path, specified with a radius and angles.

Here we want half a circle with the center at the middle right point and the radius to be 1/11 the width of our available width space.

Result:

Now we have the Petal Shape, the rest is how many numbers of them and their placements around the Pistil Circle.` `

``````struct YellowDaisyFlower: View {
@State var angle: Double = 0
@State var scale: CGFloat = 0

var body: some View {
ZStack {
ForEach(0..<36) { item in
DaisyPental()
.frame(width: 110, height: 20)
.offset(x: 75)
.rotationEffect(.degrees((Double(item) * angle) + 30))
.scaleEffect(CGFloat(scale))
}
}
.overlay {
Circle()
.frame(width: 60, height: 60)
.foregroundColor(.orange)
}
.onAppear {
withAnimation(.easeInOut(duration: 4).delay(0.1)) {
angle = 10
scale = 1
}
}
}
}``````

For this Flowers, it will have 36 petals. Because 1 circle is 360 degree so for we need to rotate each petal 360 / 36 = 10 degree from each others. And it is easily done with the help of `.rotationEffect()` modifier. The scale and delay time is for the beautiful blooming Animation using `scaleEffect()` modifier.

Result:

And that was it, we have a beautiful Daisy Flower. Try exploring with different sizing number and may be there will be a Shape that surprise you.

The beauty of Shape is that with this from now we have a beautiful flower that can be reused inside our App. Let's make it a reusable component by extracting its properties out:

``````struct YellowDaisyFlower: View {
@State var angle: Double = 0
@State var scale: CGFloat = 0
var delayTime: Double = 0.1
var widthOutside: CGFloat
var petalColor: Color

var body: some View {
ZStack {
ForEach(0..<36) { item in
DaisyPental()
.frame(width: widthOutside, height: widthOutside*(2/11))
.offset(x: widthOutside*(75/110))
.rotationEffect(.degrees((Double(item) * angle) + 30))
.scaleEffect(CGFloat(scale))
}
}
.overlay {
Circle()
.frame(width: widthOutside*(6/11), height: widthOutside*(6/11))
.foregroundColor(.orange)
}
.onAppear {
withAnimation(.easeInOut(duration: 4).delay(delayTime)) {
angle = 10
scale = 1
}
}
}
}``` ```

We will make the width and the pental color become the properties of our shape.

Now let's make our daisy garden:` `

``````struct DaisyGardenView: View {
private var columns: [GridItem] = Array(repeating: GridItem(.flexible()), count: 8)
let colors: [Color] = [.red, .orange, .yellow, .green, .blue, .teal, .indigo, .mint]

var body: some View {
VStack(spacing: 2) {
ForEach(0..<8) { _ in
HStack(spacing: 2) {
ForEach(0..<8) { index in
let width = (geometry.size.width - 16) / 2
let frameWidth = geometry.size.width
YellowDaisyFlower(delayTime: Double(index) * 0.1, widthOutside: width, petalColor: colors.randomElement() ?? .primary)
.aspectRatio(1, contentMode: .fit)
.frame(width: frameWidth, height: frameWidth, alignment: .center)
}
.aspectRatio(1, contentMode: .fit)
}
}
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.preferredColorScheme(.dark)
}
}``````

Result:

With a simple 8 by 8 stack and the help of `GeometryReader` container view, we are able to extract the necessary width and make our colorful daisy garden.

Here is a variety flower garden:

Don’t limit yourself to basic shapes. Start creating unique, eye-catching designs today with custom shapes in SwiftUI today.