arrow.html

<svg class="d3-comment__arrow ne" width="50px" height="25px" viewBox="0 0 1500 750">
    <!--the ne (north-east) in the class can be replaced by nw, sw, se with JavaScript-->
    <!--the viewbox redefines what the coordinates without units mean inside an <svg> element-->
    <!--now we can scale the whole image by resetting the with width and height -->
    <path d="M 0 25 L 500 25 L 1000 500" fill="none" stroke="black" stroke-width="50"/>
    <!--think about that the stroke widht is also included in the second argument of M and L-->
    <g transform="translate(1000,500)">
        <g transform="rotate(45)">
            <g transform="scale(100)">
                <g transform="translate(0,-1.5)">
                    <clipPath id="cp1">
                        <rect x="-0.5" y="0" width="4" height="3"/>
                    </clipPath>
                    <g clip-path="url(#cp1)">
                        <g transform="scale(.3)">
                            <g fill="black" stroke="none">
                                <path d="M 0 0 L 10 5 L 0 10 z"/>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>