Syntax Tree (linguistics, SVG)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 280" width="640">
  <style>
    .n  { font: 13px Inter; fill: #0f172a; text-anchor: middle; }
    .w  { font: 12px Inter; fill: #1f47f5; text-anchor: middle; font-style: italic; }
    .ln { stroke: #475569; stroke-width: 1.2; }
  </style>
  <!-- S -->
  <text class="n" x="260" y="30">S</text>
  <line class="ln" x1="260" y1="35" x2="140" y2="65"/>
  <line class="ln" x1="260" y1="35" x2="380" y2="65"/>
  <!-- NP -->
  <text class="n" x="140" y="80">NP</text>
  <line class="ln" x1="140" y1="85" x2="80" y2="115"/>
  <line class="ln" x1="140" y1="85" x2="200" y2="115"/>
  <text class="n" x="80" y="130">Det</text>
  <text class="w" x="80" y="155">The</text>
  <text class="n" x="200" y="130">N</text>
  <text class="w" x="200" y="155">cat</text>
  <!-- VP -->
  <text class="n" x="380" y="80">VP</text>
  <line class="ln" x1="380" y1="85" x2="320" y2="115"/>
  <line class="ln" x1="380" y1="85" x2="440" y2="115"/>
  <text class="n" x="320" y="130">V</text>
  <text class="w" x="320" y="155">sat</text>
  <text class="n" x="440" y="130">PP</text>
  <line class="ln" x1="440" y1="135" x2="400" y2="165"/>
  <line class="ln" x1="440" y1="135" x2="480" y2="165"/>
  <text class="n" x="400" y="180">P</text>
  <text class="w" x="400" y="205">on</text>
  <text class="n" x="480" y="180">NP</text>
  <line class="ln" x1="480" y1="185" x2="445" y2="215"/>
  <line class="ln" x1="480" y1="185" x2="515" y2="215"/>
  <text class="n" x="445" y="230">Det</text>
  <text class="w" x="445" y="255">the</text>
  <text class="n" x="500" y="230">N</text>
  <text class="w" x="500" y="255">mat</text>
</svg>