twistmarks for list of random stitches

[jo-pol]

Example of current presentation
Desired presentation of the color code part

SVG example:

<svg width="40px" height="40px">
<defs>
  <marker id="twist-1" viewBox="-2 -2 4 4" markerWidth="9" markerHeight="9" orient="auto" markerUnits="userSpaceOnUse">
    <path d="M 0,6 0,-6" fill="#000" stroke="#000" stroke-width="0.7px"></path>
  </marker>
  <marker id="twist-2" viewBox="-2 -2 4 4" markerWidth="9" markerHeight="9" orient="auto" markerUnits="userSpaceOnUse">
    <path d="M -1,6 V -6 M 1,6 1,-6" fill="#000" stroke="#000" stroke-width="0.7px"></path>
  </marker>
  <marker id="twist-3" viewBox="-2 -2 4 4" markerWidth="9" markerHeight="9" orient="auto" markerUnits="userSpaceOnUse">
     <path d="M -1.2000000000000002,6 V -6 M 1.2000000000000002,6 1.2000000000000002,-6  M 0,6 0,-6" fill="#000" stroke="#000" stroke-width="0.7px"></path>
  </marker>
</defs>
<path d="M 22,22 31 31 40,40" style="stroke: #000; stroke-width: 1.7px; marker-mid: url('#twist-2');"></path>
...
</svg>

The defs element should go outside the g-elements. You will have to play with the values for width/height/translate to get room for the additional lines..

GroundForge/docs/js/stitch-gallery.js

Lines 338 to 344 in c8cd61c

	<svg width="20px" height="25px">
	<g transform="scale(2,2)">
	<g transform="translate(5,6)">
	${PairSvg.shapes(displayStitch.toLowerCase())}
	</g>
	</g>
	</svg>`