title: Applying gradient layer over a UIBezierPath graph
body: <p>This is my first time asking a question, so pardon me if it not very thorough. </p>
  
  <p>Basically I am trying to apply a gradient layer on top of a UIBezierPath that is drawn as a graph. </p>
  
  <p>Here is my graph:</p>
  
  <p><img src="https://i.stack.imgur.com/ccQHR.png" alt="normal graph"></p>
  
  <p>Here is the gradient layer I am going for:</p>
  
  <p><img src="https://i.stack.imgur.com/Y2iKH.png" alt="gradient graph"></p>
  
  <p>Here is what I have tried to draw my graph:</p>
  
  <pre><code>let path = quadCurvedPathWithPoints(points: points)
  let shapeLayer = CAShapeLayer()
  shapeLayer.path = path.cgPath
  shapeLayer.strokeColor = UIColor.blue.cgColor
  shapeLayer.fillColor = UIColor.white.cgColor
  shapeLayer.position = CGPoint(x: 0, y: 0)
  shapeLayer.lineWidth = 1.0
  </code></pre>
  
  <p>This fills the graph with a blue stroke, obviously, but now I am trying to apply the white to green gradient. The way I am doing it is not working. Here is the result:</p>
  
  <p><img src="https://i.stack.imgur.com/DBqmW.png" alt="fail gradient graph"></p>
  
  <p>Here is the code I am struggling with: </p>
  
  <pre><code>let startColor = UIColor.white.withAlphaComponent(0.5)
  let endColor = UIColor.green
  
  let gradient = CAGradientLayer()
  gradient.colors = [startColor.cgColor, endColor.cgColor]
  gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
  gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
  gradient.frame = path.bounds
  let shapeMask = CAShapeLayer()
  shapeMask.path = path.cgPath
  gradient.mask = shapeLayer
  sparkLineView.layer.addSublayer(gradient)
  </code></pre>