Drawing a curved custom shape

Following on from the Drawing a custom shape recipe, what if we want to define a shape that is made up not only of straight lines but also has a curved line in it? In this recipe, we'll build a heart-shaped component using the arc and curve primitives of Path.

Getting ready

As usual, create a SwiftUI app called Heart.

How to do it…

We are going to follow the same steps we implemented in the Drawing a custom shape recipe, adding curves and an arc from one point to another.

Since the control points of a heart shape are in the midpoint of each side, we must add some convenient properties to the CGRect struct.

Let's do this by performing the following steps:

1. Let's add the properties that will return the coordinates from each of the quarters:

   extension CGRect {
       var quarterX: CGFloat {
           minX + size.height/4
       }
     ...