Connect Two DOM Elements With A Directional Arrow – domarrow.js

Preview:

Description:

domarrow.js is a JavaScript component that draws a directional arrow connecting between two DOM elements to reveal the relationship between them.

No need of SVG or Canvas element. Built using pure JavaScript, HTML, and CSS.

See also:

• Draw SVG Paths Between Two Elements – leader-line
• Draw Directional SVG Paths Between Elements – svgDynamicDirectionalPath.js

How to use it:

Load the domarrow.js and domarrow.css in the HTML document.

<link rel="stylesheet" href="domarrow.css">
<script src="domarrow.js"></script>

Create two elements on the page.

<div id="d1"></div>
<div id="d2"></div>

Create a directional arrow between these two elements.

<connection from="#d1" to="#d2" tail></connection>

Set the color of the directional arrow.

<connection from="#d1" to="#d2" color="red" tail></connection>

Hide the arrow (line only).

<connection from="#d1" to="#d2" color="red"></connection>