# createCirclePath

```ts
import { Circle, Clip, createCirclePath } from "@pibbl/core";
```

[`CirclePathOptions`](/reference/types/elements-components/#circlepathoptions) is accepted by `createCirclePath(options): Path2D`, which creates a fresh circle
from a nonnegative numeric `radius` and optional `cx`/`cy`. It is pure and owns
no render state, events, or cache.

```tsx
<Clip style={{ d: createCirclePath({ cx: 80, cy: 80, radius: 56 }) }}>
  <Circle style={{ cx: 80, cy: 80, radius: 64, fill: "#2563eb" }} />
</Clip>
```

Numeric path creators do not accept percentages or `"auto"`.

## API details from source

<span id="api-createCirclePath"></span>

Creates a Canvas Path2D for circle geometry from validated options.

```ts
createCirclePath: (options: Readonly<CirclePathOptions>) => Path2D
```

Related API: [createCirclePath](/reference/functions/create-circle-path/), [CirclePathOptions](/reference/types/elements-components/#circlepathoptions).

### Parameters

- **`options`** — Circle center and radius. See [CirclePathOptions](/reference/types/elements-components/#circlepathoptions).

### Returns

A native Canvas path containing the circle.

### See also

[CirclePathOptions](/reference/types/elements-components/#circlepathoptions)

[View source — packages/core/src/lib/geometry/circle.ts:25](/source/packages/core/src/lib/geometry/circle-ts/#L25)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Circular path factories](/minimal-examples/paths/circular-factories/): Create circle, ellipse, arc, and wedge Path2D shapes. [Plain source](/minimal/paths/circular-factories.ts)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.