Как создать свою собственную SVG стрелку для соединения двух блоков с помощью JavaScript?

Для создания настраиваемой стрелки SVG в JavaScript, вам понадобится создать новый элемент `<svg>` на странице и добавить в него линию `<line>`, которая будет представлять собой стрелку. 

Пример кода:
```javascript
// Создаем новый элемент SVG
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
document.body.appendChild(svg);

// Устанавливаем размеры SVG
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");

// Создаем линию для стрелки
var line = document.createElementNS("http://www.w3.org/2000/svg", "line");
line.setAttribute("x1", "50");
line.setAttribute("y1", "50");
line.setAttribute("x2", "150");
line.setAttribute("y2", "150");
line.setAttribute("stroke", "black");

// Добавляем линию в SVG
svg.appendChild(line);
```

Этот код создаст простую стрелку SVG, соединяющую две точки (50,50) и (150,150) на SVG холсте. Чтобы настроить стрелку (изменить ее размер, цвет, направление и т. д.), вам нужно будет изменить параметры `x1`, `y1`, `x2`, `y2` и другие атрибуты линии в соответствии с вашими требованиями. 

Также можно добавить стили SVG стрелке, используя атрибуты `stroke-width`, `stroke-dasharray`, `stroke-linecap` и другие для кастомизации ее внешнего вида.