Search code examples
iosswiftuibezierpath

Swift bezier curve fill gradient fill

Trying to create this curve in Swift using CG drawing on a view in my storyboard. I've done the white curve but having trouble with filling it with a gradient as show in the image enter image description here

Solution

  • There are three parts to this image.

    1. The white curve.
    2. The gradient.
    3. The mask that blocks out the gradient.

    Your best approach would be to create these as separate layers.

    First create a CAGradientLayer with your desired colours. Then create a path curve in white and add it above the gradient.

    Now create a third layer with a closed path (similar to the curve but closed at the bottom. Use this as a maskLayer on the gradient layer.