Rendering a border with a gradient

A gradient can be a powerful way to fill the border of a geometric shape.

In this recipe, we'll see how to change the border of a progress ring with the different types of gradient.

Getting ready

This recipe doesn't require any resources, so let's just create a SwiftUI project called GradientBorderApp.

How to do it...

Adding a gradient to a shape is like having a gradient in a view and using that shape as a cutout.

We'll reuse the progress ring made in the Implementing a progress ring recipe, using a slider to change the progress and a picker to change the type of gradient:

1. First, let's add the ProgressRing View:

   struct ProgressRing: Shape {
       private let startAngle = Angle.radians(1.5 * .pi)
      
       @Binding
       var progress: Double
       
       func path(in rect: CGRect) -> Path ...