docs/svg_examples/noterange_C1_B3.svg

<svg xmlns="http://www.w3.org/2000/svg" width="390" height="125" class="card"><rect class="shadow_rect" x="5" y="5" width="382" height="117" rx="3" ry="3" fill="#000000"/><rect stroke="#505050" stroke-width="1" class="card_rect" x="3" y="3" width="382" height="117" rx="3" ry="3" fill="#FFFFFF"/><rect stroke="#505050" stroke-width="1" class="note C1" x="5" y="33" width="18" height="85" fill="#AAAAAA"/><g class="square C1"><rect stroke="#000000" stroke-width="1" class="square C1" x="8" y="101" width="12" height="12" fill="#FFFFFF"/><text dominant-baseline="central" text-anchor="middle" font-family="monospace" font-size="8" class="square C1" fill="#000000" x="14" y="107">C1</text></g><rect stroke="#505050" stroke-width="1" class="note D1" x="23" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note E1" x="41" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note F1" x="59" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note G1" x="77" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note A1" x="95" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note B1" x="113" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note C2" x="131" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note D2" x="149" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note E2" x="167" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note F2" x="185" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note G2" x="203" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note A2" x="221" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note B2" x="239" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note C3" x="257" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note D3" x="275" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note E3" x="293" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note F3" x="311" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note G3" x="329" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note A3" x="347" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note B3" x="365" y="33" width="18" height="85" fill="#AAAAAA"/><g class="square B3"><rect stroke="#000000" stroke-width="1" class="square B3" x="368" y="101" width="12" height="12" fill="#FFFFFF"/><text dominant-baseline="central" text-anchor="middle" font-family="monospace" font-size="8" class="square B3" fill="#000000" x="374" y="107">B3</text></g><rect stroke="#505050" stroke-width="1" class="note d1" x="18" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note e1" x="36" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note f1" x="72" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note a1" x="90" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note b1" x="108" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note d2" x="144" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note e2" x="162" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note f2" x="198" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note a2" x="216" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note b2" x="234" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note d3" x="270" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note e3" x="288" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note f3" x="324" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note a3" x="342" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note b3" x="360" y="33" width="10" height="51" fill="#505050"/><text dominant-baseline="central" font-family="sans-serif" font-size="15" font-weight="bold" fill="#000000" x="5" y="16">NoteRange(C1, B3)</text></svg>