Line and Path Elements

Use line and path for diagrams, arrows, curves, logo reveals, and infographic strokes.

Line Shape

interface LineClip extends BaseClip {
  type: "line";
  points: Array<[number, number] | { x: number; y: number }>;
  radius?: number;
  closed?: boolean;
  drawStart?: number;
  drawEnd?: number;
  startOffset?: number;
  endOffset?: number;
  startArrow?: boolean;
  endArrow?: boolean;
  arrowSize?: number;
  lineWidth?: number;
  lineCap?: CanvasLineCap;
  lineJoin?: CanvasLineJoin;
}

Path Shape

interface PathClip extends BaseClip {
  type: "path";
  data: string;
  closed?: boolean;
  drawStart?: number;
  drawEnd?: number;
  startArrow?: boolean;
  endArrow?: boolean;
}

Fields

• points: line points in local coordinates relative to the node center
• data: SVG path data, for example M -180 0 C -80 -140 80 -140 180 0
• drawStart / drawEnd: visible segment from 0 to 1
• startArrow / endArrow: draw arrows at either end
• lineWidth: overrides style.strokeWidth

You can animate stroke reveal with keyframes.property values such as start, end, drawStart, or drawEnd.

Example

{
  "type": "path",
  "start": 0,
  "duration": 3,
  "data": "M -180 0 C -80 -140 80 -140 180 0",
  "endArrow": true,
  "style": {
    "stroke": "#f97316",
    "strokeWidth": 10
  },
  "keyframes": [
    {
      "property": "end",
      "frames": [
        { "time": 0, "value": 0 },
        { "time": 1, "value": 1, "easing": "easeOutCubic" }
      ]
    }
  ]
}