Unleash Your Creativity with Custom Shapes in SwiftUI!

Jamesthang
2 min readFeb 7, 2023

--

Are you tired of using the same old shapes in your iOS app designs? With SwiftUI, you can now bring your imagination to life by creating custom shapes with ease!

SwiftUI comes with very handy built in Shape like RoundedRectangle, Capsule or Circle. This can be used as background for Views, Buttons or decoration. There can have gesture like Tap or Drag and Drop. Which many developers have used to built simple Games. But did you know that you can create your own Custom Shape in SwiftUI too.

Recently, I took this chance with the inspiration from the Flowers Festival in my home country Viet Nam to draw different type of Flowers

Now to draw this Flower Custom Shape I 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.

Here I create a Custom Shape represent its Petal. To conform with the Shape protocol we need to have the path function in which will return the path of our Custom Shape.

I then init our Path() then use the move() function to point at the starting point in this case this the minimum in the X axis and mid center in the Y axis. Then I use the addArc() function to draw this Petal Shape. It take center point, radius of the arc. Here we want half circle clockwise. And we are done!

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

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 Animation.

And that was it, we have a beautiful Daisy Flower. I also made 10 more Flowers in my public Github repo: https://github.com/Enryun/Flowers. Check it out if you are interested.

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

--

--