Drawing in SwiftUI — Code Shapes with Paths in Swift UI

Step 1 — Create a new Xcode project

  • Create a single view application with Xcode11 Beta.
  • Make sure use SwiftUI is selected.

Step 2— Create a triangle with Path

In your blank app, replace Text(“Hello World”) with the following code. You will get a basic black triangle as pictured.

Note: I am using the live preview in Xcode 11 which is available on Mac OS Catalina. If you are still running Mojave, but still have Xcode 11 downloaded, simply compile your app to an iPhone simulator and everything will be gucci.

Explanation

  • path.move — this starts our shape 20 points to the right giving us that nice little inset.
  • the first path.addLine — this starts a line 20 points in, and stretches down 300 points to reach the bottom of our pictured shape
  • the second path.addLine — this starts 300 points down and 300 points to the right

This only requires two lines because Path automatically connects its lines. This gives us a triangle shape.

Step 3 — Adding a final line, but with a catch.

Add the following line to your Path. The output will appear as pictured, let’s talk about it.

By starting our point at 180 on the x axis, we are given a strange shape. I included this to give you a better idea of how these lines work.

change 180 to 300 to achieve the square.

We can simply change this to 300 to get the following output.

Step 4 — Add a Fill to your Path.

Modify your SwiftUI code to match the screenshot.

  • Fill takes in a color or a linear gradient. Try adding simply (Color.red) instead of a gradient and you will be given a straight red square.
  • When adding a linear gradient in SwiftUI paths, however, we are required to provide a gradient which is a Color array, a start point, and end point.

Step 5— That’s all folks!

You now have a basic understanding of SwiftUI Path, and how to create shapes in SwiftUI with pure code and linear gradients.

Advanced Drawing and Animation with SwiftUI: Here.

If you want to learn more about SwiftUI and learn much more about Drawing Paths and Shapes in SwiftUI, see the Complete SwiftUI Development course with this discounted coupon.

In this course you will go through various SwiftUI tutorials, one of those being creating this badge with pure code specifically Paths and gradients like we did here in this guide!

Tweet me your article and video requests and I will make them!

Thanks Fam!

I truly appreciate those of you who watch my videos, read my articles, and take my courses.

Thanks,

And as always, I will see you in the very next video.

-Max