Library for creating SVG arrow between two HTML elements. Positions of elements are observed, so when they change arrow will rerender.
npm install arrows-svg
How to use it
const arrow =/*- arrow.node is HTMLElement- arrow.timer is idInterval from setInterval()REMEMBER about clearInterval(node.timer) after unmount*/documentbody;
Could be also used from
Styles should be added to make arrow visible. Feel free to change them.
timer should be used to
clearInterval() of observer.
Direction - Position of
Point in HTMLElement from/to.
translation is array of two numbers
[x, y] like
[-0.5, 1.3] which are used by Bezier curve.
y are offset of Bezier control point. Position of control point is calculated by function:
x: pointx + viewportwidth * pointtranslation0y: pointy + viewportheight * pointtranslation1
point.yare from / to position,
viewportis size between points,
point.translationis array from above.
translation could be tested in
npm run build
npm run start
npm run test