Clip

Read as Markdown

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

Clip uses ClipProps and ClipStyle to apply a Path2D or PathGeometry and fill rule to recursive 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.

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

See the Clip live example.

API details from source

Describes a clipping container for JSX or createElement authoring.

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

Related API: Clip, PibblPrimitiveComponent, ClipProps, PrimitiveInput, 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

ClipStyle

View source — packages/core/src/lib/components/clip.ts:67

Implementation guidance for agents

Read the Drawing, layout, and effects companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

• Drawing composition: Group, cache, and clip a drawing, then add text and an embedded thumbnail. Plain source

Documentation version

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