I wanted to recreate the three example arrows on this page in SVG. So far the middle one is elluding me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
}
#size {
position: absolute;
top: 10px;
right: 10px;
}
use {
stroke-width: 30;
}
</style>
</head>
<body>
<input id="size" type="range" min="1" max="40" step="1">
<svg width=900 height=500>
<defs>
<path id="a1" d="M50 50L200 50L200 200M200 50L50 200" stroke="#000" fill="none" />
<path id="a2" d="M50 50L200 50M200 200L200 50M200 50L50 200" stroke="#000" fill="none" />
<g id="a3">
<path d="M50 50L200 50M200 200L200 50" stroke="#000" fill="none" stroke-linecap="butt" />
<path d="M200 50L50 200" stroke="#000" fill="none" stroke-linecap="square" />
</g>
</defs>
<use transform="translate(0, 0)" xlink:href="#a1" stroke-linecap="butt" />
<use transform="translate(250, 0)" xlink:href="#a1" stroke-linecap="round" />
<use transform="translate(500, 0)" xlink:href="#a1" stroke-linecap="square" />
<use transform="translate(0, 250)" xlink:href="#a2" stroke-linecap="butt" />
<use transform="translate(250, 250)" xlink:href="#a2" stroke-linecap="round" />
<use transform="translate(500, 250)" xlink:href="#a3" />
</svg>
<script type="text/javascript">
var slider = document.getElementById('size')
var lines = document.querySelectorAll('use')
slider.oninput = function() {
for (var i = lines.length - 1; i >= 0; i--) {
lines[i].style.strokeWidth = this.value
}
}
</script>
</body>
</html>