# Clip

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

`Clip` uses [`ClipProps`](/reference/types/elements-components/#clipprops) and [`ClipStyle`](/reference/types/styles/#clipstyle) to apply a `Path2D` or [`PathGeometry`](/reference/functions/path-geometry/) and fill rule to
recursive [`PibblNode`](/reference/types/elements-components/#pibblnode) children. The clip geometry stays aligned with paint and
hit testing. Filters on the receiving clip are composed before its own clip is
presented.

```tsx
<Clip style={{ d: new Path2D("M0 0h140v90H0z") }}>
  <Circle style={{ cx: 100, cy: 45, radius: 64, fill: "#60a5fa" }} />
</Clip>
```

See the [Clip live example](/playground/#/examples/composition/clip).

## API details from source

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

Describes a clipping container for JSX or createElement authoring.

```ts
Clip: PibblPrimitiveComponent<ClipProps, PrimitiveInput<ClipProps, ClipStyle>>
```

Related API: [Clip](/reference/components/clip/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [ClipProps](/reference/types/elements-components/#clipprops), [PrimitiveInput](/reference/types/styles/#primitiveinput), [ClipStyle](/reference/types/styles/#clipstyle).

### Parameters

- **`props`** — Authored component inputs, supplied through JSX or createElement. See the linked
props and style types.

### Throws

When called directly; Pibbl mounts this component through JSX or createElement.

### See also

[ClipProps](/reference/types/elements-components/#clipprops)

[ClipStyle](/reference/types/styles/#clipstyle)

[View source — packages/core/src/lib/components/clip.ts:67](/source/packages/core/src/lib/components/clip-ts/#L67)

## 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

- [Drawing composition](/minimal-examples/drawing/composition/): Group, cache, and clip a drawing, then add text and an embedded thumbnail. [Plain source](/minimal/drawing/composition.tsx)
## Documentation version

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