Molecular Orbital Diagram (SVG)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 360" width="640">
  <style>
    .ao  { font: 12px Inter; fill: #0f172a; }
    .mo  { font: 12px Inter; fill: #0f172a; font-weight: 600; }
    .lvl { stroke: #0f172a; stroke-width: 1.5; }
    .ele { fill: #1f47f5; stroke: #0f172a; }
  </style>
  <!-- atomic orbitals (left + right) -->
  <line class="lvl" x1="40"  y1="290" x2="100" y2="290"/>
  <line class="lvl" x1="420" y1="290" x2="480" y2="290"/>
  <text class="ao" x="70" y="305" text-anchor="middle">2s</text>
  <text class="ao" x="450" y="305" text-anchor="middle">2s</text>

  <line class="lvl" x1="40"  y1="200" x2="100" y2="200"/>
  <line class="lvl" x1="420" y1="200" x2="480" y2="200"/>
  <text class="ao" x="70" y="215" text-anchor="middle">2p</text>
  <text class="ao" x="450" y="215" text-anchor="middle">2p</text>

  <!-- MO levels (centre) -->
  <line class="lvl" x1="220" y1="320" x2="300" y2="320"/>
  <text class="mo" x="260" y="335" text-anchor="middle">σ(2s)</text>
  <line class="lvl" x1="220" y1="260" x2="300" y2="260"/>
  <text class="mo" x="260" y="275" text-anchor="middle">σ*(2s)</text>
  <line class="lvl" x1="220" y1="190" x2="300" y2="190"/>
  <text class="mo" x="260" y="205" text-anchor="middle">σ(2p)</text>
  <line class="lvl" x1="180" y1="160" x2="240" y2="160"/>
  <line class="lvl" x1="280" y1="160" x2="340" y2="160"/>
  <text class="mo" x="260" y="175" text-anchor="middle">π(2p)</text>
  <line class="lvl" x1="180" y1="100" x2="240" y2="100"/>
  <line class="lvl" x1="280" y1="100" x2="340" y2="100"/>
  <text class="mo" x="260" y="95" text-anchor="middle">π*(2p)</text>
  <line class="lvl" x1="220" y1="50"  x2="300" y2="50"/>
  <text class="mo" x="260" y="45" text-anchor="middle">σ*(2p)</text>

  <!-- electrons (arrows) -->
  <g class="ele" font-family="Inter" font-size="14" text-anchor="middle">
    <text x="245" y="324">↑</text><text x="275" y="324">↓</text>
    <text x="245" y="264">↑</text><text x="275" y="264">↓</text>
    <text x="245" y="194">↑</text><text x="275" y="194">↓</text>
    <text x="210" y="164">↑</text><text x="230" y="164">↓</text>
    <text x="290" y="164">↑</text><text x="310" y="164">↓</text>
    <text x="210" y="104">↑</text>
    <text x="310" y="104">↑</text>
  </g>

  <!-- dotted lines connecting AOs to MOs -->
  <g stroke="#94a3b8" stroke-dasharray="3,3">
    <line x1="100" y1="290" x2="220" y2="320"/>
    <line x1="100" y1="290" x2="220" y2="260"/>
    <line x1="100" y1="200" x2="220" y2="190"/>
    <line x1="100" y1="200" x2="180" y2="160"/>
    <line x1="100" y1="200" x2="180" y2="100"/>
    <line x1="100" y1="200" x2="220" y2="50"/>
    <line x1="420" y1="290" x2="300" y2="320"/>
    <line x1="420" y1="290" x2="300" y2="260"/>
    <line x1="420" y1="200" x2="300" y2="190"/>
    <line x1="420" y1="200" x2="340" y2="160"/>
    <line x1="420" y1="200" x2="340" y2="100"/>
    <line x1="420" y1="200" x2="300" y2="50"/>
  </g>
  <text x="260" y="20" font-family="Inter" font-size="14" font-weight="600" text-anchor="middle" fill="#0f172a">O₂ — Molecular orbitals (paramagnetic)</text>
</svg>