JSFiddle - React, Tailwind, and code Playground

by Pavel Kityan

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="500" />

JavaScript

$('svg')
    .append(createArrow(20,50,20,220,'red'))
    .append(createArrow(50,50,220,50,'blue'));

function createArrow(xFrom,yFrom,xTo,yTo,color){
    
    // пока рассматриваем только варианты вертикальной стрелки (xFrom = xTo) или горизонтальной (yFrom = yTo)
    
    // отступ от начала линии до начала головы (точка схождения штрихов стрелки), px. 
    // [!] должен быть больше длины головы
    var headOffset = 30;
    // ширина головы стрелки (расстояние между концами штрихов), px
    var headWidth = 10;
    // длина головы стрелки (проекция штризхов на линию), px
    var headLength = 10;

    // таки какая у нас стрелка? ошибку не бросаем, себе верим     
    var isVertical = (xFrom == xTo);    
    
    // начало головы
    var x0 = (isVertical) ? xFrom : (xFrom + headOffset);
    var y0 = (isVertical) ? (yFrom + headOffset) : yFrom;    
  
    // первый штрих
    var x1 = (isVertical) ? (xFrom - headWidth/2) : (xFrom + headOffset - headLength);
    var y1 = (isVertical) ? (yFrom + headOffset - headLength) : (yFrom - headWidth/2);
    
    // второй штрих
    var x2 = (isVertical) ? (xFrom + headWidth/2) : (xFrom + headOffset - headLength);
    var y2 = (isVertical) ? (yFrom + headOffset - headLength) : (yFrom + headWidth/2);
    
    var arrow = $(document.createElementNS("http://www.w3.org/2000/svg", "path"))
    .attr({
        'd': 
            'M' + xFrom + ' ' + yFrom + ' ' + 
            'L' + xTo + ' ' + yTo + ' ' + 
            'M' + x0 + ' ' + y0 + ' ' + 
            'L' + x1 + ' ' + y1 + ' ' + 
            'M' + x0 + ' ' + y0 + ' ' +
            'L' + x2 + ' ' + y2,
        'stroke-width': '2',
        'stroke': color
    });

    
    return arrow;
}