BezierCurve

The bezierCurve primitive renders SVG Bezier curves — either quadratic (one control point) or cubic (two control points). Use it for smooth paths, flow diagrams, connector continuations, and organic shapes.

0.00s / 3.97s · F0

Props

Prop	Type	Default	Description
`x1`	`number`	—	Start point X
`y1`	`number`	—	Start point Y
`cx1`	`number`	—	First control point X
`cy1`	`number`	—	First control point Y
`cx2`	`number`	`undefined`	Second control point X (makes it cubic)
`cy2`	`number`	`undefined`	Second control point Y (makes it cubic)
`x2`	`number`	—	End point X
`y2`	`number`	—	End point Y
`stroke`	`string`	`'#fff'`	Stroke color
`strokeWidth`	`number`	`2`	Width of the stroke
`fill`	`string`	`'none'`	Fill color
`strokeDasharray`	`string`	`undefined`	Dash pattern (e.g. `"6 3"`)
`lineStyle`	`'solid' \| 'dashed' \| 'dotted'`	`'solid'`	Semantic line style when a custom dash pattern is not provided
`strokeLinecap`	`'butt' \| 'round' \| 'square'`	`'round'`	SVG line cap style
`strokeLinejoin`	`'miter' \| 'round' \| 'bevel'`	`'round'`	SVG join style
`startCap`	`'none' \| 'arrow' \| 'dot'`	`'none'`	Optional marker at the start point
`endCap`	`'none' \| 'arrow' \| 'dot'`	`'none'`	Optional marker at the end point
`opacity`	`number`	`1`	Opacity from 0 to 1

Quadratic vs Cubic

Quadratic: Provide x1, y1, cx1, cy1, x2, y2 — one control point, simpler curves
Cubic: Also provide cx2, cy2 — two control points, S-curves and more complex shapes

Code Example

elements: {
  quadratic: {
    id: 'quadratic',
    type: 'bezierCurve',
    props: { type: 'bezierCurve', x1: 50, y1: 250, cx1: 250, cy1: 30, x2: 450, y2: 250, stroke: '$accent', strokeWidth: 3, endCap: 'arrow' },
  },
  cubic: {
    id: 'cubic',
    type: 'bezierCurve',
    props: { type: 'bezierCurve', x1: 50, y1: 150, cx1: 150, cy1: 20, cx2: 350, cy2: 280, x2: 450, y2: 150, stroke: '$secondary', strokeWidth: 3 },
  },
}