title: iOS Draw Custom Shape using CAShapeLayer
body: <p>I want to draw a custom shape similar to the image below.</p>
  
  <p><a href="https://i.stack.imgur.com/efcGT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/efcGT.png" alt="Aim"></a> </p>
  
  <hr>
  
  <ol>
  <li><strong>A line with inverted round corners</strong></li>
  <li><strong>A hollow circle</strong></li>
  <li><strong>Another line that follows</strong> </li>
  </ol>
  
  <blockquote>
    <p>I achieved this in <strong>Android</strong> in the following way.</p>
  </blockquote>
  
  <pre><code>float radiusClear = halfWidth - strokeSize / 2f; // 1
  canvas.drawRect(0, 0, width, radiusClear, rootPaint); // 2
  canvas.drawCircle(0, radiusClear, radiusClear, clearPaint); // 3
  canvas.drawCircle(width, radiusClear, radiusClear, clearPaint); // 4
  canvas.drawLine(halfWidth, 0, halfWidth, halfHeight, rootPaint); // 5
  canvas.drawLine(halfWidth, halfHeight, halfWidth, height, iconPaint); // 6
  canvas.drawCircle(halfWidth, halfHeight, halfWidth, iconPaint); // 7
  canvas.drawCircle(halfWidth, halfHeight, thirdWidth, clearPaint); // 8
  </code></pre>
  
  <ul>
  <li>Where (1) calculates the distances.</li>
  <li>(2) Draw a rect at the top </li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/ChuF1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ChuF1.png" alt="Top Rect"></a></p>
  
  <ul>
  <li>(3) (4) Draws two circles that clears the rect so it looks like two arcs </li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/P8OE3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P8OE3.png" alt="Arc1"></a>       <a href="https://i.stack.imgur.com/shK1A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/shK1A.png" alt="Arc2"></a></p>
  
  <ul>
  <li>Then rest of the calls draw the remaining views in a similar way.</li>
  </ul>
  
  <p><strong>What would be the equivalent or better approach on swift?</strong></p>