<!--
{
  "availability" : [
    "iOS: 3.0.0 -",
    "iPadOS: 3.0.0 -",
    "macCatalyst: 13.1.0 -",
    "macOS: 10.6.0 -",
    "tvOS: 9.0.0 -",
    "visionOS: 1.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "QuartzCore",
  "identifier" : "/documentation/QuartzCore/CAShapeLayer",
  "metadataVersion" : "0.1.0",
  "role" : "Class",
  "symbol" : {
    "kind" : "Class",
    "modules" : [
      "Core Animation"
    ],
    "preciseIdentifier" : "c:objc(cs)CAShapeLayer"
  },
  "title" : "CAShapeLayer"
}
-->

# CAShapeLayer

A layer that draws a cubic Bezier spline in its coordinate space.

```
class CAShapeLayer
```

## Overview

The shape is composited between the layer’s contents and its first sublayer.

The shape will be drawn antialiased, and whenever possible it will be mapped into screen space before being rasterized to preserve resolution independence. However, certain kinds of image processing operations, such as CoreImage filters, applied to the layer or its ancestors may force rasterization in a local coordinate space.

The following code shows how you can build complex, composite paths and display them using a shape layer. In this example, a series of progressively transformed ellipses form a simple flower shape. The shape layer that displays the path has its [`fillRule`](/documentation/QuartzCore/CAShapeLayer/fillRule) set to [`evenOdd`](/documentation/QuartzCore/CAShapeLayerFillRule/evenOdd) which stops the overlapping “petals” from filling with the yellow [`fillColor`](/documentation/QuartzCore/CAShapeLayer/fillColor).

```swift
let width: CGFloat = 640
let height: CGFloat = 640
     
let shapeLayer = CAShapeLayer()
shapeLayer.frame = CGRect(x: 0, y: 0,
                          width: width, height: height)
     
let path = CGMutablePath()
     
stride(from: 0, to: CGFloat.pi * 2, by: CGFloat.pi / 6).forEach {
    angle in 
    var transform  = CGAffineTransform(rotationAngle: angle)
        .concatenating(CGAffineTransform(translationX: width / 2, y: height / 2))
    
    let petal = CGPath(ellipseIn: CGRect(x: -20, y: 0, width: 40, height: 100),
                       transform: &transform)
    
    path.addPath(petal)
}
    
shapeLayer.path = path
shapeLayer.strokeColor = UIColor.red.cgColor
shapeLayer.fillColor = UIColor.yellow.cgColor
shapeLayer.fillRule = kCAFillRuleEvenOdd
```

The following figure shows the resulting shape layer.

![Composite path displayed in a shape layer](images/com.apple.quartzcore/media-2825196@2x.png)

> Note:
> Shape rasterization may favor speed over accuracy. For example, pixels with multiple intersecting path segments may not give exact results.

## Topics

### Specifying the Shape Path

[`path`](/documentation/QuartzCore/CAShapeLayer/path)

The path defining the shape to be rendered. Animatable.

### Accessing Shape Style Properties

[`fillColor`](/documentation/QuartzCore/CAShapeLayer/fillColor)

The color used to fill the shape’s path. Animatable.

[`fillRule`](/documentation/QuartzCore/CAShapeLayer/fillRule)

The fill rule used when filling the shape’s path.

[`lineCap`](/documentation/QuartzCore/CAShapeLayer/lineCap)

Specifies the line cap style for the shape’s path.

[`lineDashPattern`](/documentation/QuartzCore/CAShapeLayer/lineDashPattern)

The dash pattern applied to the shape’s path when stroked.

[`lineDashPhase`](/documentation/QuartzCore/CAShapeLayer/lineDashPhase)

The dash phase applied to the shape’s path when stroked. Animatable.

[`lineJoin`](/documentation/QuartzCore/CAShapeLayer/lineJoin)

Specifies the line join style for the shape’s path.

[`lineWidth`](/documentation/QuartzCore/CAShapeLayer/lineWidth)

Specifies the line width of the shape’s path. Animatable.

[`miterLimit`](/documentation/QuartzCore/CAShapeLayer/miterLimit)

The miter limit used when stroking the shape’s path. Animatable.

[`strokeColor`](/documentation/QuartzCore/CAShapeLayer/strokeColor)

The color used to stroke the shape’s path. Animatable.

[`strokeStart`](/documentation/QuartzCore/CAShapeLayer/strokeStart)

The relative location at which to begin stroking the path. Animatable.

[`strokeEnd`](/documentation/QuartzCore/CAShapeLayer/strokeEnd)

The relative location at which to stop stroking the path. Animatable.

### Constants

[Shape Fill Mode Values](/documentation/QuartzCore/shape-fill-mode-values)

These constants specify the possible fill modes for [`fillRule`](/documentation/QuartzCore/CAShapeLayer/fillRule).

[Line Join Values](/documentation/QuartzCore/line-join-values)

These constants specify the shape of the joints between connected segments of a stroked path.

[Line Cap Values](/documentation/QuartzCore/line-cap-values)

These constants specify the shape of endpoints for an open path when stroked.



---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)