Line

The <Line> primitive renders a straight connector between two points. It supports solid, dashed, and dotted strokes plus endpoint caps, making it useful for connectors, axes, guides, dividers, and directional relationships.

0.00s / 2.97s · F0

Props

Prop	Type	Default	Description
`x1`	`number`	`0`	X coordinate of the start point
`y1`	`number`	`0`	Y coordinate of the start point
`x2`	`number`	`0`	X coordinate of the end point
`y2`	`number`	`0`	Y coordinate of the end point
`stroke`	`string`	`'currentColor'`	Stroke color
`strokeWidth`	`number`	`1`	Width of the stroke
`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'`	`'butt'`	SVG line cap 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

Code Example

elements: {
  rising: {
    id: 'rising',
    type: 'line',
    props: { type: 'line', x1: 50, y1: 250, x2: 450, y2: 50, stroke: '$accent', strokeWidth: 3, endCap: 'arrow' },
  },
  falling: {
    id: 'falling',
    type: 'line',
    props: { type: 'line', x1: 50, y1: 50, x2: 450, y2: 250, stroke: '$secondary', strokeWidth: 2, lineStyle: 'dashed', strokeLinecap: 'round' },
  },
}