Drawing a curved custom shape

Following up on the previous 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 HeartApp.

How to do it...

We are going to follow the same steps we implemented in the previous 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 mid point of each side, we must add some convenient properties to the CGRect struct.

Let's do this with the following steps:

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

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