Drawing curved SVG arrow lines from div to div

Question

I want to draw two curved arrow lines using SVG to connect two elements to indicate they go back and forth, like this:

I\'ve read a bit about SVG but I\'m n

Answer 1

We finally have it! Take a look at this:

https://www.npmjs.com/package/arrows-svg

there is also a React version:

https://www.npmjs.com/package/react-arrows

So if you have two divs with let's say ids named: from and to according to divs from your example, then you do:

import arrowCreate, { DIRECTION } from 'arrows'

const arrow = arrowCreate({
  className: 'arrow',
  from: {
    direction: DIRECTION.LEFT,
    node: document.getElementById('from'),
    translation: [-0.5, -1],
  },
  to: {
    direction: DIRECTION.LEFT,
    node: document.getElementById('to'),
    translation: [0.9, 1],
  },
})

/*
  - arrow.node is HTMLElement
  - arrow.timer is idInterval from setInterval()
    REMEMBER about clearInterval(node.timer) after unmount
*/
document.body.appendChild(arrow.node);

and of course some css:

.arrow {
  pointer-events: none;
}

.arrow__path {
  stroke: #000;
  fill: transparent;
  stroke-dasharray: 4 2;
}

.arrow__head line {
  stroke: #000;
  stroke-width: 1px;        
}

Tested and it works!