<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
<line class="start" x1="10" y1="50" x2="100" y2="50" stroke="black" />
<rect x="10" y="50" width="10" height="10" fill="blue"/>
<path class="start" d="M 10 100 L 50 100 L 100 100" stroke="black"/>
<rect x="10" y="100" width="10" height="10" fill="blue"/>
<polygon class="start" points="10,150 50,150 100,150" stroke="black"/>
<rect x="10" y="150" width="10" height="10" fill="blue"/>
<polyline class="start" points="10,200 50,200 100,200" stroke="black"/>
<rect x="10" y="200" width="10" height="10" fill="blue"/>
<line class="end" x1="150" y1="50" x2="250" y2="50" stroke="black"/>
<rect x="250" y="50" width="10" height="10" fill="blue"/>
<path class="end" d="M 150 100 L 200 100 L 250 100" stroke="black"/>
<rect x="250" y="100" width="10" height="10" fill="blue"/>
<polygon class="end" points="250,150 200,150" stroke="black"/>
<rect x="250" y="150" width="10" height="10" fill="blue"/>
<polyline class="end" points="150,200 200,200 250,200" stroke="black"/>
<rect x="250" y="200" width="10" height="10" fill="blue"/>
<line class="mid" x1="300" y1="50" x2="400" y2="50" stroke="black"/>
<path class="mid" d="M 300 100 L 350 100 L 400 100" stroke="black"/>
<rect x="350" y="100" width="10" height="10" fill="blue"/>
<polygon class="mid" points="300,150 350,150" stroke="black"/>
<rect x="350" y="150" width="10" height="10" fill="blue"/>
<polyline class="mid" points="300,200 350,200 400,200" stroke="black"/>
<rect x="350" y="200" width="10" height="10" fill="blue"/>
</svg>