Example with svg markers

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Marker</title>

        <meta charset="UTF-8">

        <style>
            svg {
                border: 1px solid #ccc;
            }

            line {
                stroke: #ccc;
            }

            .marker-open-arrow-transparent-part {
                fill: white;
            }

            .marker-open-arrow-closed-part {
                fill: black;
            }

            .marker-open-arrow-line-part {
                fill: #ccc;

                stroke-dasharray: 10;
            }
        </style>
    </head>
    <body>
        <svg width="800" height="800">

            <line x1="36" y1="54" x2="316" y2="271"
                marker-start="url(#arrow-start)"
                marker-end="url(#arrow-end)"
                 style="stroke-dasharray: 0;"></line>

             <line x1="56" y1="154" x2="216" y2="471"
                 marker-start="url(#open-arrow-start)"
                 marker-end="url(#open-arrow-end)"
                  style="stroke-dasharray: 0;"></line>

            <line x1="526" y1="154" x2="616" y2="471"
                 marker-start="url(#open-arrow-start)"
                 marker-end="url(#open-arrow-end)"
                 style="stroke-dasharray: 10; stroke-width: 5px;"></line>

            <line x1="486" y1="354" x2="416" y2="471"
                 marker-start="url(#open-arrow-end-by-top-lines)"
                 marker-end="url(#open-arrow-end-by-end-lines)"
                 style="stroke-dasharray: 0; stroke-width: 5px;"></line>

            <defs>
                <marker id="open-arrow-end-by-top-lines"
                    viewBox="0 -5 10 10"
                    refX="0" refY="0"
                    markerWidth="10"
                    markerHeight="10"
                    orient="auto">
                    <g>
                        <path d="M0,0 L0,-1 L10,6 L0,1" fill="blue" fill-opacity="0.3" />
                        <path d="M0,0 L0,1 L10,-6 L0,-1" fill="green" fill-opacity="0.5" />

                        <path d="M0,0 L0,-1 L10,6" fill="blue" fill-opacity="0.0" />
                        <path d="M0,0 L0,1 L10,-6" fill="green" fill-opacity="0.0" />
                    </g>
                </marker>

                <marker id="open-arrow-end-by-end-lines"
                    viewBox="0 -5 10 10"
                    refX="10" refY="0"
                    markerWidth="10"
                    markerHeight="10"
                    orient="auto">
                    <g>
                       <path d="M10,0 L10,-1 L0,-6 L10,1" fill="red" fill-opacity="0.5" />

                       <path d="M10,0 L10,1 L0,6 L10,-1" fill="green" fill-opacity="0.5" />
                    </g>
                </marker>

                <marker id="open-arrow-start"
                    viewBox="0 -5 10 10"
                    refX="9.9" refY="0"
                    markerWidth="10"
                    markerHeight="10"
                    orient="auto">
                    <g>
                        <path d="M10,-5L10,5L0,0"
                              class="marker-open-arrow-closed-part"></path>

                        <path d="M11,-4.5L11,4.5L2,0"
                              class="marker-open-arrow-transparent-part"></path>

                        <path d="M11,-0.56L11,0.56L2,0"
                              class="marker-open-arrow-line-part"></path>
                    </g>
                </marker>

                <marker id="open-arrow-end"
                    viewBox="0 -5 10 10"
                    refX="0.1" refY="0"
                    markerWidth="10"
                    markerHeight="10"
                    orient="auto">
                    <g>
                        <path d="M0,-5L10,0L0,5"
                              class="marker-open-arrow-closed-part"></path>

                        <path d="M-1,-4.5L8,0L-1,4.5"
                              class="marker-open-arrow-transparent-part"></path>

                        <path d="M-1,-0.56L8,0L-1,0.56"
                              class="marker-open-arrow-line-part"></path>
                    </g>
                </marker>

                <marker id="arrow-start"
                    viewBox="0 -5 10 10"
                    refX="5" refY="0"
                    markerWidth="10"
                    markerHeight="10"
                    orient="auto">
                    <path d="M10,-5L10,5L0,0"></path>
                </marker>

                <marker id="arrow-end"
                    viewBox="0 -5 10 10"
                    refX="5" refY="0"
                    markerWidth="10"
                    markerHeight="10"
                    orient="auto">
                    <path d="M0,-5L10,0L0,5"></path>
                </marker>
            </defs>
        </svg>
    </body>
</html>
dimitardanailov/svg-arrow-marker.md
