Skip to main content

Variable: paths

const paths: object

Geometric SVG path generators for shapes, cards, and clipping frames.

Type Declaration​

NameTypeDescription
box()(options?: BoxPathOptions) => PathFunctionGenerates a rectangle with optional rounded corners.
circle()(options?: CirclePathOptions) => PathFunctionGenerates a circle or ellipse fitting inside bounds. - fit: "contain" (default): forces a 1:1 circular aspect ratio. - fit: "fill": stretches to the full bounding box as an ellipse.
diamond()(options?: DiamondPathOptions) => PathFunctionGenerates a diamond (rhombus) decision shape with softly rounded tips.
heart()() => PathFunctionGenerates a symmetrical heart shape.
hexagon()(options?: HexagonPathOptions) => PathFunctionGenerates a regular hexagon.
pill()() => PathFunctionGenerates a capsule / pill path with fully rounded ends.
polygon()(options?: PolygonPathOptions) => PathFunctionGenerates a regular N-sided polygon (pentagon, octagon, etc.).
speechBubble()(options?: SpeechBubblePathOptions) => PathFunctionGenerates a speech bubble with a pointy pointer tail. Pass a live target (element or stage point) to make the tail track it each frame.
squircle()(options?: SquirclePathOptions) => PathFunctionGenerates a squircle (superellipse) with continuous G2 curvature.
star()(options?: StarPathOptions) => PathFunctionGenerates a multi-point star shape.
thoughtBubble()(options?: ThoughtBubblePathOptions) => PathFunctionGenerates a scalloped thought cloud with a curved trail of shrinking bubbles. Pass a live target (element or stage point) to make the trail track it each frame.
triangle()(options?: TrianglePathOptions) => PathFunctionGenerates a triangle pointing in the specified direction with rounded corners.