examples/loops.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="220mm" height="165mm" viewBox="15 30 220 165">
  <style>
    <![CDATA[
      svg { background: none; }
      svg * { stroke-linecap: round; stroke-linejoin: round; }
      rect, circle, ellipse, polygon { stroke-width: 0.5; fill: white; stroke: black; }
      line, polyline, path { stroke-width: 0.5; fill: none; stroke: black; }
      text, tspan { stroke-width: 0; font-family: sans-serif; font-size: 3px; fill: black; paint-order: stroke; stroke: white; }
      .d-fill-lightgrey { fill: lightgrey; }
      text.d-fill-lightgrey, text.d-fill-lightgrey * { fill: black; stroke: white; }
      .d-fill-lightyellow { fill: lightyellow; }
      text.d-fill-lightyellow, text.d-fill-lightyellow * { fill: black; stroke: white; }
      .d-fill-silver { fill: silver; }
      text.d-fill-silver, text.d-fill-silver * { fill: black; stroke: white; }
      .d-red { stroke: red; }
      text.d-red, text.d-red * { fill: red; stroke: white; }
      .d-thick { stroke-width: 1; }
    ]]>
  </style>
  <defs>
    <g id="cube">
      <polygon points="0 0 0 10 10 5 10 -5" class="d-fill-lightyellow"/>
      <polygon points="10 -5 20 0 20 10 10 5" class="d-fill-silver"/>
      <polygon points="0 10 10 15 20 10 10 5" class="d-fill-lightgrey"/>
    </g>
  </defs>


      <use href="#cube" x="20" y="40" width="20" height="20"/>
      <use href="#cube" x="30" y="55" width="20" height="20"/>

      <use href="#cube" x="20" y="70" width="20" height="20"/>
      <use href="#cube" x="30" y="85" width="20" height="20"/>

      <use href="#cube" x="20" y="100" width="20" height="20"/>
      <use href="#cube" x="30" y="115" width="20" height="20"/>

      <use href="#cube" x="20" y="130" width="20" height="20"/>
      <use href="#cube" x="30" y="145" width="20" height="20"/>

      <use href="#cube" x="20" y="160" width="20" height="20"/>
      <use href="#cube" x="30" y="175" width="20" height="20"/>


      <use href="#cube" x="40" y="40" width="20" height="20"/>
      <use href="#cube" x="50" y="55" width="20" height="20"/>

      <use href="#cube" x="40" y="70" width="20" height="20"/>
      <use href="#cube" x="50" y="85" width="20" height="20"/>

      <use href="#cube" x="40" y="100" width="20" height="20"/>
      <use href="#cube" x="50" y="115" width="20" height="20"/>

      <use href="#cube" x="40" y="130" width="20" height="20"/>
      <use href="#cube" x="50" y="145" width="20" height="20"/>

      <use href="#cube" x="40" y="160" width="20" height="20"/>
      <use href="#cube" x="50" y="175" width="20" height="20"/>


      <use href="#cube" x="60" y="40" width="20" height="20"/>
      <use href="#cube" x="70" y="55" width="20" height="20"/>

      <use href="#cube" x="60" y="70" width="20" height="20"/>
      <use href="#cube" x="70" y="85" width="20" height="20"/>

      <use href="#cube" x="60" y="100" width="20" height="20"/>
      <use href="#cube" x="70" y="115" width="20" height="20"/>

      <use href="#cube" x="60" y="130" width="20" height="20"/>
      <use href="#cube" x="70" y="145" width="20" height="20"/>

      <use href="#cube" x="60" y="160" width="20" height="20"/>
      <use href="#cube" x="70" y="175" width="20" height="20"/>


      <use href="#cube" x="80" y="40" width="20" height="20"/>
      <use href="#cube" x="90" y="55" width="20" height="20"/>

      <use href="#cube" x="80" y="70" width="20" height="20"/>
      <use href="#cube" x="90" y="85" width="20" height="20"/>

      <use href="#cube" x="80" y="100" width="20" height="20"/>
      <use href="#cube" x="90" y="115" width="20" height="20"/>

      <use href="#cube" x="80" y="130" width="20" height="20"/>
      <use href="#cube" x="90" y="145" width="20" height="20"/>

      <use href="#cube" x="80" y="160" width="20" height="20"/>
      <use href="#cube" x="90" y="175" width="20" height="20"/>


      <use href="#cube" x="100" y="40" width="20" height="20"/>
      <use href="#cube" x="110" y="55" width="20" height="20"/>

      <use href="#cube" x="100" y="70" width="20" height="20"/>
      <use href="#cube" x="110" y="85" width="20" height="20"/>

      <use href="#cube" x="100" y="100" width="20" height="20"/>
      <use href="#cube" x="110" y="115" width="20" height="20"/>

      <use href="#cube" x="100" y="130" width="20" height="20"/>
      <use href="#cube" x="110" y="145" width="20" height="20"/>

      <use href="#cube" x="100" y="160" width="20" height="20"/>
      <use href="#cube" x="110" y="175" width="20" height="20"/>


      <use href="#cube" x="120" y="40" width="20" height="20"/>
      <use href="#cube" x="130" y="55" width="20" height="20"/>

      <use href="#cube" x="120" y="70" width="20" height="20"/>
      <use href="#cube" x="130" y="85" width="20" height="20"/>

      <use href="#cube" x="120" y="100" width="20" height="20"/>
      <use href="#cube" x="130" y="115" width="20" height="20"/>

      <use href="#cube" x="120" y="130" width="20" height="20"/>
      <use href="#cube" x="130" y="145" width="20" height="20"/>

      <use href="#cube" x="120" y="160" width="20" height="20"/>
      <use href="#cube" x="130" y="175" width="20" height="20"/>


      <use href="#cube" x="140" y="40" width="20" height="20"/>
      <use href="#cube" x="150" y="55" width="20" height="20"/>

      <use href="#cube" x="140" y="70" width="20" height="20"/>
      <use href="#cube" x="150" y="85" width="20" height="20"/>

      <use href="#cube" x="140" y="100" width="20" height="20"/>
      <use href="#cube" x="150" y="115" width="20" height="20"/>

      <use href="#cube" x="140" y="130" width="20" height="20"/>
      <use href="#cube" x="150" y="145" width="20" height="20"/>

      <use href="#cube" x="140" y="160" width="20" height="20"/>
      <use href="#cube" x="150" y="175" width="20" height="20"/>


      <use href="#cube" x="160" y="40" width="20" height="20"/>
      <use href="#cube" x="170" y="55" width="20" height="20"/>

      <use href="#cube" x="160" y="70" width="20" height="20"/>
      <use href="#cube" x="170" y="85" width="20" height="20"/>

      <use href="#cube" x="160" y="100" width="20" height="20"/>
      <use href="#cube" x="170" y="115" width="20" height="20"/>

      <use href="#cube" x="160" y="130" width="20" height="20"/>
      <use href="#cube" x="170" y="145" width="20" height="20"/>

      <use href="#cube" x="160" y="160" width="20" height="20"/>
      <use href="#cube" x="170" y="175" width="20" height="20"/>


      <use href="#cube" x="180" y="40" width="20" height="20"/>
      <use href="#cube" x="190" y="55" width="20" height="20"/>

      <use href="#cube" x="180" y="70" width="20" height="20"/>
      <use href="#cube" x="190" y="85" width="20" height="20"/>

      <use href="#cube" x="180" y="100" width="20" height="20"/>
      <use href="#cube" x="190" y="115" width="20" height="20"/>

      <use href="#cube" x="180" y="130" width="20" height="20"/>
      <use href="#cube" x="190" y="145" width="20" height="20"/>

      <use href="#cube" x="180" y="160" width="20" height="20"/>
      <use href="#cube" x="190" y="175" width="20" height="20"/>


      <use href="#cube" x="200" y="40" width="20" height="20"/>
      <use href="#cube" x="210" y="55" width="20" height="20"/>

      <use href="#cube" x="200" y="70" width="20" height="20"/>
      <use href="#cube" x="210" y="85" width="20" height="20"/>

      <use href="#cube" x="200" y="100" width="20" height="20"/>
      <use href="#cube" x="210" y="115" width="20" height="20"/>

      <use href="#cube" x="200" y="130" width="20" height="20"/>
      <use href="#cube" x="210" y="145" width="20" height="20"/>

      <use href="#cube" x="200" y="160" width="20" height="20"/>
      <use href="#cube" x="210" y="175" width="20" height="20"/>


    <line x1="20" y1="110" x2="22" y2="110" class="d-thick d-red"/>

    <line x1="22" y1="110" x2="24" y2="117.258" class="d-thick d-red"/>

    <line x1="24" y1="117.258" x2="26" y2="124.084" class="d-thick d-red"/>

    <line x1="26" y1="124.084" x2="28" y2="130.074" class="d-thick d-red"/>

    <line x1="28" y1="130.074" x2="30" y2="134.871" class="d-thick d-red"/>

    <line x1="30" y1="134.871" x2="32" y2="138.191" class="d-thick d-red"/>

    <line x1="32" y1="138.191" x2="34" y2="139.836" class="d-thick d-red"/>

    <line x1="34" y1="139.836" x2="36" y2="139.708" class="d-thick d-red"/>

    <line x1="36" y1="139.708" x2="38" y2="137.816" class="d-thick d-red"/>

    <line x1="38" y1="137.816" x2="40" y2="134.271" class="d-thick d-red"/>

    <line x1="40" y1="134.271" x2="42" y2="129.284" class="d-thick d-red"/>

    <line x1="42" y1="129.284" x2="44" y2="123.151" class="d-thick d-red"/>

    <line x1="44" y1="123.151" x2="46" y2="116.237" class="d-thick d-red"/>

    <line x1="46" y1="116.237" x2="48" y2="108.953" class="d-thick d-red"/>

    <line x1="48" y1="108.953" x2="50" y2="101.731" class="d-thick d-red"/>

    <line x1="50" y1="101.731" x2="52" y2="95" class="d-thick d-red"/>

    <line x1="52" y1="95" x2="54" y2="89.16" class="d-thick d-red"/>

    <line x1="54" y1="89.16" x2="56" y2="84.559" class="d-thick d-red"/>

    <line x1="56" y1="84.559" x2="58" y2="81.468" class="d-thick d-red"/>

    <line x1="58" y1="81.468" x2="60" y2="80.073" class="d-thick d-red"/>

    <line x1="60" y1="80.073" x2="62" y2="80.456" class="d-thick d-red"/>

    <line x1="62" y1="80.456" x2="64" y2="82.594" class="d-thick d-red"/>

    <line x1="64" y1="82.594" x2="66" y2="86.36" class="d-thick d-red"/>

    <line x1="66" y1="86.36" x2="68" y2="91.53" class="d-thick d-red"/>

    <line x1="68" y1="91.53" x2="70" y2="97.798" class="d-thick d-red"/>

    <line x1="70" y1="97.798" x2="72" y2="104.791" class="d-thick d-red"/>

    <line x1="72" y1="104.791" x2="74" y2="112.093" class="d-thick d-red"/>

    <line x1="74" y1="112.093" x2="76" y2="119.271" class="d-thick d-red"/>

    <line x1="76" y1="119.271" x2="78" y2="125.898" class="d-thick d-red"/>

    <line x1="78" y1="125.898" x2="80" y2="131.58" class="d-thick d-red"/>

    <line x1="80" y1="131.58" x2="82" y2="135.981" class="d-thick d-red"/>

    <line x1="82" y1="135.981" x2="84" y2="138.838" class="d-thick d-red"/>

    <line x1="84" y1="138.838" x2="86" y2="139.982" class="d-thick d-red"/>

    <line x1="86" y1="139.982" x2="88" y2="139.344" class="d-thick d-red"/>

    <line x1="88" y1="139.344" x2="90" y2="136.964" class="d-thick d-red"/>

    <line x1="90" y1="136.964" x2="92" y2="132.981" class="d-thick d-red"/>

    <line x1="92" y1="132.981" x2="94" y2="127.634" class="d-thick d-red"/>

    <line x1="94" y1="127.634" x2="96" y2="121.238" class="d-thick d-red"/>

    <line x1="96" y1="121.238" x2="98" y2="114.175" class="d-thick d-red"/>

    <line x1="98" y1="114.175" x2="100" y2="106.864" class="d-thick d-red"/>

    <line x1="100" y1="106.864" x2="102" y2="99.739" class="d-thick d-red"/>

    <line x1="102" y1="99.739" x2="104" y2="93.224" class="d-thick d-red"/>

    <line x1="104" y1="93.224" x2="106" y2="87.706" class="d-thick d-red"/>

    <line x1="106" y1="87.706" x2="108" y2="83.512" class="d-thick d-red"/>

    <line x1="108" y1="83.512" x2="110" y2="80.891" class="d-thick d-red"/>

    <line x1="110" y1="80.891" x2="112" y2="80" class="d-thick d-red"/>

    <line x1="112" y1="80" x2="114" y2="80.891" class="d-thick d-red"/>

    <line x1="114" y1="80.891" x2="116" y2="83.512" class="d-thick d-red"/>

    <line x1="116" y1="83.512" x2="118" y2="87.706" class="d-thick d-red"/>

    <line x1="118" y1="87.706" x2="120" y2="93.224" class="d-thick d-red"/>

    <line x1="120" y1="93.224" x2="122" y2="99.739" class="d-thick d-red"/>

    <line x1="122" y1="99.739" x2="124" y2="106.864" class="d-thick d-red"/>

    <line x1="124" y1="106.864" x2="126" y2="114.175" class="d-thick d-red"/>

    <line x1="126" y1="114.175" x2="128" y2="121.238" class="d-thick d-red"/>

    <line x1="128" y1="121.238" x2="130" y2="127.634" class="d-thick d-red"/>

    <line x1="130" y1="127.634" x2="132" y2="132.981" class="d-thick d-red"/>

    <line x1="132" y1="132.981" x2="134" y2="136.964" class="d-thick d-red"/>

    <line x1="134" y1="136.964" x2="136" y2="139.344" class="d-thick d-red"/>

    <line x1="136" y1="139.344" x2="138" y2="139.982" class="d-thick d-red"/>

    <line x1="138" y1="139.982" x2="140" y2="138.838" class="d-thick d-red"/>

    <line x1="140" y1="138.838" x2="142" y2="135.981" class="d-thick d-red"/>

    <line x1="142" y1="135.981" x2="144" y2="131.58" class="d-thick d-red"/>

    <line x1="144" y1="131.58" x2="146" y2="125.898" class="d-thick d-red"/>

    <line x1="146" y1="125.898" x2="148" y2="119.271" class="d-thick d-red"/>

    <line x1="148" y1="119.271" x2="150" y2="112.093" class="d-thick d-red"/>

    <line x1="150" y1="112.093" x2="152" y2="104.791" class="d-thick d-red"/>

    <line x1="152" y1="104.791" x2="154" y2="97.798" class="d-thick d-red"/>

    <line x1="154" y1="97.798" x2="156" y2="91.53" class="d-thick d-red"/>

    <line x1="156" y1="91.53" x2="158" y2="86.36" class="d-thick d-red"/>

    <line x1="158" y1="86.36" x2="160" y2="82.594" class="d-thick d-red"/>

    <line x1="160" y1="82.594" x2="162" y2="80.456" class="d-thick d-red"/>

    <line x1="162" y1="80.456" x2="164" y2="80.073" class="d-thick d-red"/>

    <line x1="164" y1="80.073" x2="166" y2="81.468" class="d-thick d-red"/>

    <line x1="166" y1="81.468" x2="168" y2="84.559" class="d-thick d-red"/>

    <line x1="168" y1="84.559" x2="170" y2="89.16" class="d-thick d-red"/>

    <line x1="170" y1="89.16" x2="172" y2="95" class="d-thick d-red"/>

    <line x1="172" y1="95" x2="174" y2="101.731" class="d-thick d-red"/>

    <line x1="174" y1="101.731" x2="176" y2="108.953" class="d-thick d-red"/>

    <line x1="176" y1="108.953" x2="178" y2="116.237" class="d-thick d-red"/>

    <line x1="178" y1="116.237" x2="180" y2="123.151" class="d-thick d-red"/>

    <line x1="180" y1="123.151" x2="182" y2="129.284" class="d-thick d-red"/>

    <line x1="182" y1="129.284" x2="184" y2="134.271" class="d-thick d-red"/>

    <line x1="184" y1="134.271" x2="186" y2="137.816" class="d-thick d-red"/>

    <line x1="186" y1="137.816" x2="188" y2="139.708" class="d-thick d-red"/>

    <line x1="188" y1="139.708" x2="190" y2="139.836" class="d-thick d-red"/>

    <line x1="190" y1="139.836" x2="192" y2="138.191" class="d-thick d-red"/>

    <line x1="192" y1="138.191" x2="194" y2="134.871" class="d-thick d-red"/>

    <line x1="194" y1="134.871" x2="196" y2="130.074" class="d-thick d-red"/>

    <line x1="196" y1="130.074" x2="198" y2="124.084" class="d-thick d-red"/>

    <line x1="198" y1="124.084" x2="200" y2="117.258" class="d-thick d-red"/>

    <line x1="200" y1="117.258" x2="202" y2="110" class="d-thick d-red"/>

    <line x1="202" y1="110" x2="204" y2="102.742" class="d-thick d-red"/>

    <line x1="204" y1="102.742" x2="206" y2="95.916" class="d-thick d-red"/>

    <line x1="206" y1="95.916" x2="208" y2="89.926" class="d-thick d-red"/>

    <line x1="208" y1="89.926" x2="210" y2="85.129" class="d-thick d-red"/>

    <line x1="210" y1="85.129" x2="212" y2="81.809" class="d-thick d-red"/>

    <line x1="212" y1="81.809" x2="214" y2="80.164" class="d-thick d-red"/>

    <line x1="214" y1="80.164" x2="216" y2="80.292" class="d-thick d-red"/>

    <line x1="216" y1="80.292" x2="218" y2="82.184" class="d-thick d-red"/>

    <line x1="218" y1="82.184" x2="220" y2="85.729" class="d-thick d-red"/>

</svg>