Introduction

CAShapeLayer and UIBezierPath are the standard tools for drawing smooth vector circles on iOS. They render more cleanly than bitmap images, scale well across device sizes, and are easy to animate.

The basic idea is to create a circular path, assign it to a shape layer, and make sure the layer's geometry matches the final layout. Most "rough circle" problems come from sizing or stroke placement, not from the path API itself.

Create a Circular Path

The easiest way to create a circle is to use UIBezierPath(ovalIn:) with a square rectangle:

1import UIKit
2
3let rect = CGRect(x: 20, y: 20, width: 100, height: 100)
4let path = UIBezierPath(ovalIn: rect)

If the rectangle is square, the oval is a circle. If it is not square, the result is an ellipse. That is the first rule: if you want a circle, keep the geometry square.

Render the Path with CAShapeLayer

Once the path exists, assign it to a shape layer:

1import UIKit
2
3let shapeLayer = CAShapeLayer()
4shapeLayer.path = path.cgPath
5shapeLayer.fillColor = UIColor.clear.cgColor
6shapeLayer.strokeColor = UIColor.systemBlue.cgColor
7shapeLayer.lineWidth = 4
8shapeLayer.contentsScale = UIScreen.main.scale
9
10view.layer.addSublayer(shapeLayer)

contentsScale helps the layer render crisply on Retina displays. It is often already correct, but setting it explicitly is a reasonable safeguard in custom drawing code.

Update the Circle After Layout

In real UI code, the path should usually be created after the view has its final bounds. A small view subclass makes this straightforward:

1import UIKit
2
3final class CircleView: UIView {
4    private let shapeLayer = CAShapeLayer()
5
6    override init(frame: CGRect) {
7        super.init(frame: frame)
8        layer.addSublayer(shapeLayer)
9        shapeLayer.fillColor = UIColor.clear.cgColor
10        shapeLayer.strokeColor = UIColor.systemRed.cgColor
11        shapeLayer.lineWidth = 3
12    }
13
14    required init?(coder: NSCoder) {
15        fatalError("init(coder:) has not been implemented")
16    }
17
18    override func layoutSubviews() {
19        super.layoutSubviews()
20
21        let inset = shapeLayer.lineWidth / 2
22        let circleRect = bounds.insetBy(dx: inset, dy: inset)
23
24        shapeLayer.frame = bounds
25        shapeLayer.path = UIBezierPath(ovalIn: circleRect).cgPath
26    }
27}

The inset is important because the stroke is centered on the path. Without it, part of a thick stroke can be clipped at the edge of the layer.

Keep the Result Smooth

A vector circle drawn this way should already look smooth. If it does not, the common causes are:

• the drawing rect is not square
• the path was created before final layout
• the stroke is being clipped
• the layer is being scaled awkwardly after drawing

That is why layout usually matters more than "Bezier smoothness" for circles. The APIs already produce mathematically smooth curves.

Common Pitfalls

The biggest mistake is drawing the path in a non-square rectangle and expecting a perfect circle.

Another common issue is forgetting stroke alignment. If the path touches the bounds exactly, a thick stroke can be clipped unless you inset the drawing rect by half the line width.

It is also easy to build the path too early, before Auto Layout has sized the view, which produces incorrect geometry.

Finally, if the circle looks blurry, check scaling and layout first. A CAShapeLayer drawing a proper circle path should look crisp when the geometry is correct.

Summary

• Use UIBezierPath(ovalIn:) with a square rect to create a circle.
• Assign the path to a CAShapeLayer for crisp vector rendering.
• Inset the drawing rect by half the line width to avoid clipping.
• Build or update the path after layout so the bounds are final.
• Circle quality problems usually come from geometry, not from the drawing APIs.