URL components

HTML

<svg xmlns="http://www.w3.org/2000/svg" id="fig3" width="896" viewBox="0 0 616 160">
  <style>
    #fig3 .url-text  { font: 11px ui-monospace, 'SF Mono', Menlo, Consolas, monospace; fill: #111827; }
    #fig3 .label     { font: 11px ui-sans-serif, system-ui, sans-serif; fill: #1f2937; }

    #fig3 .url       { fill: #e8e8e8; }

    #fig3 .origin    { fill: #fef3c7; }
    #fig3 .protocol  { fill: #bbf7d0; }
    #fig3 .username  { fill: #93c5fd; }
    #fig3 .password  { fill: #93c5fd; }
    #fig3 .host      { fill: #5eead4; }
    #fig3 .hostname  { fill: #f9a8d4; }
    #fig3 .port      { fill: #7dd3fc; }
    #fig3 .pathname  { fill: #fed7aa; }
    #fig3 .search    { fill: #ddd6fe; }
    #fig3 .hash      { fill: #fecaca; }

    #fig3 .link { fill: none; stroke-width: 4; stroke-linecap: round; }
    #fig3 .s-protocol { stroke: #bbf7d0; }
    #fig3 .s-origin   { stroke: #fef3c7; }
    #fig3 .s-username { stroke: #93c5fd; }
    #fig3 .s-password { stroke: #93c5fd; }
    #fig3 .s-host     { stroke: #5eead4; }
    #fig3 .s-hostname { stroke: #f9a8d4; }
    #fig3 .s-port     { stroke: #7dd3fc; }
    #fig3 .s-pathname { stroke: #fed7aa; }
    #fig3 .s-search   { stroke: #ddd6fe; }
    #fig3 .s-hash     { stroke: #fecaca; }
  </style>

  <rect class="url" x="10" y="6" width="540" height="20" rx="4"></rect>
  <rect class="url" x="10" y="40" width="540" height="20" rx="4"></rect>
  <rect class="url" x="10" y="66" width="540" height="20" rx="4"></rect>

  <!--
    URL 2 and URL 3 parts are positioned via <tspan> + textLength so each part
    lines up with its anatomy pill below. All lines are straight vertical.
    Layout: URL 1 y=0..32, URL 2 y=34..66, URL 3 y=68..84 (16 tall, no wrappers).
    Anatomy: Row 3 y=88, Row 2 y=106, Row 1 y=124. ViewBox 142.
  -->

  <!-- URL 1 rects -->
  <rect class="origin" x="20" y="0" width="64" height="32" rx="4"></rect>
  <rect class="origin" x="172" y="0" width="160" height="32" rx="4"></rect>
 ...