SVG for the Central Line at Oxford Circus Station

oxford_circus_central.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="660" viewBox="0 0 1000 660" role="img" aria-labelledby="title desc">
  <title id="title">Topological map — Central line (Bond Street ↔ Oxford Circus ↔ Tottenham Court Road)</title>
  <desc id="desc">Three stations arranged vertically with a Central line red connector that breaks at each station circle and resumes on the other side. Each station has a red square marker and a label to the right.</desc>

  <rect x="0" y="0" width="100%" height="100%" fill="#ffffff" />

  <defs>
    <style>
      :root{
        --lu-blue: #003688;
        --central-red: rgb(220,36,31);
      }
      .station-name{
        font-family: "Johnston", "Gill Sans", "Helvetica", "Arial", sans-serif;
        font-size: 27px;
        fill: var(--lu-blue);
        dominant-baseline: middle;
      }
      .station-circle{
        fill: none;
        stroke: #000000;
        stroke-width: 6;
      }
      .line{
        stroke: var(--central-red);
        stroke-width: 6;
        stroke-linecap: butt;
      }
      .marker{
        fill: var(--central-red);
      }
    </style>
  </defs>

  <!-- Layout:
       Line X = 1/3 of 1000 = 333.3333
       Stations at y = 130, 330, 530 (equal spacing)
       Circle radius = 24, so line breaks at +/- 24 around each station center
  -->
  <g id="map">
    <!-- Red line segments: stop at circle edge and resume after -->
    <!-- Above top station -->
    <line class="line" x1="333.3333" y1="80" x2="333.3333" y2="106" />
    <!-- Between top and middle -->
    <line class="line" x1="333.3333" y1="154" x2="333.3333" y2="306" />
    <!-- Between middle and bottom -->
    <line class="line" x1="333.3333" y1="354" x2="333.3333" y2="506" />
    <!-- Below bottom station -->
    <line class="line" x1="333.3333" y1="554" x2="333.3333" y2="580" />

    <!-- Bond Street (top) -->
    <g transform="translate(333.3333,130)">
      <circle class="station-circle" cx="0" cy="0" r="24" />
      <rect class="marker" x="24" y="-9" width="18" height="18" />
      <text class="station-name" x="52" y="0">Bond Street</text>
    </g>

    <!-- Oxford Circus (middle) -->
    <g transform="translate(333.3333,330)">
      <circle class="station-circle" cx="0" cy="0" r="24" />
      <rect class="marker" x="24" y="-9" width="18" height="18" />
      <text class="station-name" x="52" y="0">Oxford Circus</text>
    </g>

    <!-- Tottenham Court Road (bottom) -->
    <g transform="translate(333.3333,530)">
      <circle class="station-circle" cx="0" cy="0" r="24" />
      <rect class="marker" x="24" y="-9" width="18" height="18" />
      <text class="station-name" x="52" y="0">Tottenham Court Road</text>
    </g>
  </g>
</svg>