leetcode/apps/docs/public/intervals_overlap-formula.svg

<svg viewBox="0 0 820 340" xmlns="http://www.w3.org/2000/svg">
  <!-- Background (REQUIRED) - MUST BE FIRST ELEMENT -->
  <rect width="820" height="340" fill="#f8f9fa" rx="10"/>

  <!-- Title (left-anchored, manually centered) -->
  <text x="206" y="42" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#2c3e50">Overlap = [max(starts), min(ends)]</text>

  <!-- interval x = [2, 8]; endpoints labeled ABOVE the bar -->
  <text x="184" y="82" font-family="monospace" font-size="15" fill="#2c3e50">2</text>
  <text x="512" y="82" font-family="monospace" font-size="15" fill="#2c3e50">8</text>
  <text x="158" y="112" font-family="monospace" font-size="16" font-weight="bold" fill="#3498db">x</text>
  <rect x="190" y="90" width="330" height="30" fill="#3498db" rx="4"/>

  <!-- interval y = [5, 11]; endpoints labeled BELOW the bar -->
  <text x="158" y="157" font-family="monospace" font-size="16" font-weight="bold" fill="#f39c12">y</text>
  <rect x="355" y="135" width="330" height="30" fill="#f39c12" rx="4"/>
  <text x="349" y="185" font-family="monospace" font-size="15" fill="#2c3e50">5</text>
  <text x="672" y="185" font-family="monospace" font-size="15" fill="#2c3e50">11</text>

  <!-- shared range [5, 8] -->
  <path d="M 355,86 L 355,205" stroke="#7f8c8d" stroke-width="1.5" stroke-dasharray="4 3" fill="none"/>
  <path d="M 520,86 L 520,205" stroke="#7f8c8d" stroke-width="1.5" stroke-dasharray="4 3" fill="none"/>
  <rect x="355" y="210" width="165" height="14" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="3"/>
  <text x="405" y="252" font-family="monospace" font-size="16" font-weight="bold" fill="#27ae60">overlap = [5, 8]</text>

  <!-- computation -->
  <text x="206" y="300" font-family="monospace" font-size="16" fill="#2c3e50">max(2, 5) = 5   and   min(8, 11) = 8</text>
</svg>