tree.svg

<svg xmlns="http://www.w3.org/2000/svg" width="820" height="520" viewBox="0 0 820 520">
  <rect width="100%" height="100%" fill="white"/>

  <!-- Edges -->
  <g stroke="#333" stroke-width="2" fill="none" stroke-linecap="round">
    <!-- Level 0 -> 1 -->
    <line x1="410" y1="60" x2="210" y2="160"/>
    <line x1="410" y1="60" x2="610" y2="160"/>

    <!-- Level 1 -> 2 -->
    <line x1="210" y1="160" x2="110" y2="260"/>
    <line x1="210" y1="160" x2="310" y2="260"/>
    <line x1="610" y1="160" x2="510" y2="260"/>
    <line x1="610" y1="160" x2="710" y2="260"/>

    <!-- Level 2 -> 3 -->
    <line x1="110" y1="260" x2="60" y2="360"/>
    <line x1="110" y1="260" x2="160" y2="360"/>
    <line x1="310" y1="260" x2="260" y2="360"/>
    <line x1="310" y1="260" x2="360" y2="360"/>
    <line x1="510" y1="260" x2="460" y2="360"/>
    <line x1="510" y1="260" x2="560" y2="360"/>
    <line x1="710" y1="260" x2="660" y2="360"/>
    <line x1="710" y1="260" x2="760" y2="360"/>

    <!-- Level 3 -> 4 -->
    <line x1="60"  y1="360" x2="35"  y2="460"/>
    <line x1="60"  y1="360" x2="85"  y2="460"/>
    <line x1="160" y1="360" x2="135" y2="460"/>
    <line x1="160" y1="360" x2="185" y2="460"/>

    <line x1="260" y1="360" x2="235" y2="460"/>
    <line x1="260" y1="360" x2="285" y2="460"/>
    <line x1="360" y1="360" x2="335" y2="460"/>
    <line x1="360" y1="360" x2="385" y2="460"/>

    <line x1="460" y1="360" x2="435" y2="460"/>
    <line x1="460" y1="360" x2="485" y2="460"/>
    <line x1="560" y1="360" x2="535" y2="460"/>
    <line x1="560" y1="360" x2="585" y2="460"/>

    <line x1="660" y1="360" x2="635" y2="460"/>
    <line x1="660" y1="360" x2="685" y2="460"/>
    <line x1="760" y1="360" x2="735" y2="460"/>
    <line x1="760" y1="360" x2="785" y2="460"/>
  </g>

  <!-- Nodes -->
  <g stroke="#111" stroke-width="2" fill="#fff">
    <!-- Level 0 -->
    <circle cx="410" cy="60" r="16"/>

    <!-- Level 1 -->
    <circle cx="210" cy="160" r="16"/>
    <circle cx="610" cy="160" r="16"/>

    <!-- Level 2 -->
    <circle cx="110" cy="260" r="16"/>
    <circle cx="310" cy="260" r="16"/>
    <circle cx="510" cy="260" r="16"/>
    <circle cx="710" cy="260" r="16"/>

    <!-- Level 3 -->
    <circle cx="60"  cy="360" r="16"/>
    <circle cx="160" cy="360" r="16"/>
    <circle cx="260" cy="360" r="16"/>
    <circle cx="360" cy="360" r="16"/>
    <circle cx="460" cy="360" r="16"/>
    <circle cx="560" cy="360" r="16"/>
    <circle cx="660" cy="360" r="16"/>
    <circle cx="760" cy="360" r="16"/>

    <!-- Level 4 -->
    <circle cx="35"  cy="460" r="16"/>
    <circle cx="85"  cy="460" r="16"/>
    <circle cx="135" cy="460" r="16"/>
    <circle cx="185" cy="460" r="16"/>

    <circle cx="235" cy="460" r="16"/>
    <circle cx="285" cy="460" r="16"/>
    <circle cx="335" cy="460" r="16"/>
    <circle cx="385" cy="460" r="16"/>

    <circle cx="435" cy="460" r="16"/>
    <circle cx="485" cy="460" r="16"/>
    <circle cx="535" cy="460" r="16"/>
    <circle cx="585" cy="460" r="16"/>

    <circle cx="635" cy="460" r="16"/>
    <circle cx="685" cy="460" r="16"/>
    <circle cx="735" cy="460" r="16"/>
    <circle cx="785" cy="460" r="16"/>
  </g>

  <!-- Labels (unique natural numbers, BFS order) -->
  <g font-family="monospace" font-size="14" text-anchor="middle" dominant-baseline="middle" fill="#111">
    <!-- Level 0 -->
    <text x="410" y="60">1</text>

    <!-- Level 1 -->
    <text x="210" y="160">2</text>
    <text x="610" y="160">3</text>

    <!-- Level 2 -->
    <text x="110" y="260">4</text>
    <text x="310" y="260">5</text>
    <text x="510" y="260">6</text>
    <text x="710" y="260">7</text>

    <!-- Level 3 -->
    <text x="60"  y="360">8</text>
    <text x="160" y="360">9</text>
    <text x="260" y="360">10</text>
    <text x="360" y="360">11</text>
    <text x="460" y="360">12</text>
    <text x="560" y="360">13</text>
    <text x="660" y="360">14</text>
    <text x="760" y="360">15</text>

    <!-- Level 4 -->
    <text x="35"  y="460">16</text>
    <text x="85"  y="460">17</text>
    <text x="135" y="460">18</text>
    <text x="185" y="460">19</text>

    <text x="235" y="460">20</text>
    <text x="285" y="460">21</text>
    <text x="335" y="460">22</text>
    <text x="385" y="460">23</text>

    <text x="435" y="460">24</text>
    <text x="485" y="460">25</text>
    <text x="535" y="460">26</text>
    <text x="585" y="460">27</text>

    <text x="635" y="460">28</text>
    <text x="685" y="460">29</text>
    <text x="735" y="460">30</text>
    <text x="785" y="460">31</text>
  </g>
</svg>