Arrow

The <Arrow> primitive draws a line with an arrowhead pointing from the start point to the end point. Use it for directed relationships, flow diagrams, and annotations.

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 (arrow tip)
y2	number	0	Y coordinate of the end point (arrow tip)
stroke	string	'currentColor'	Stroke color
strokeWidth	number	1	Width of the stroke
headSize	number	8	Size of the arrowhead in pixels
strokeDasharray	string	undefined	Dash pattern (e.g. "6 3")
opacity	number	1	Opacity from 0 to 1

Code Example

React

import { Player, FadeIn, Arrow } from '@elucim/core';

<Player width={500} height={300} fps={30} durationInFrames={60}>
  <FadeIn duration={20}>
    <Arrow x1={50} y1={150} x2={200} y2={150} stroke="#6c5ce7" strokeWidth={2} headSize={10} />
  </FadeIn>
  <FadeIn duration={20}>
    <Arrow x1={230} y1={150} x2={350} y2={80} stroke="#ff6b6b" strokeWidth={2} headSize={8} />
  </FadeIn>
</Player>

DSL (JSON)

{
  "width": 500, "height": 300, "fps": 30, "durationInFrames": 60,
  "children": [
    {
      "type": "arrow", "x1": 50, "y1": 150, "x2": 200, "y2": 150,
      "stroke": "#6c5ce7", "strokeWidth": 2, "headSize": 10,
      "fadeIn": { "duration": 20 }
    },
    {
      "type": "arrow", "x1": 230, "y1": 150, "x2": 350, "y2": 80,
      "stroke": "#ff6b6b", "strokeWidth": 2, "headSize": 8,
      "fadeIn": { "duration": 20 }
    }
  ]
}