Line

The <Line> primitive renders a straight line between two points. It supports solid and dashed strokes, making it useful for connectors, axes, guides, and dividers.

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"`)
`opacity`	`number`	`1`	Opacity from 0 to 1

import { Player, Draw, Line } from '@elucim/core';

<Player width={500} height={300} fps={30} durationInFrames={60}>
  <Draw duration={30}>
    <Line x1={50} y1={250} x2={450} y2={50} stroke="#6c5ce7" strokeWidth={3} />
  </Draw>
  <Draw duration={25}>
    <Line x1={50} y1={50} x2={450} y2={250} stroke="#ff6b6b" strokeWidth={2} />
  </Draw>
</Player>

{
  "width": 500, "height": 300, "fps": 30, "durationInFrames": 60,
  "children": [
    {
      "type": "line", "x1": 50, "y1": 250, "x2": 450, "y2": 50,
      "stroke": "#6c5ce7", "strokeWidth": 3,
      "draw": { "duration": 30 }
    },
    {
      "type": "line", "x1": 50, "y1": 50, "x2": 450, "y2": 250,
      "stroke": "#ff6b6b", "strokeWidth": 2,
      "draw": { "duration": 25 }
    }
  ]
}