<svg width="800" height="480" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="800" height="480" fill="#ffffff"/>
  
  <!-- Title -->
  <text x="400" y="30" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="#333">Session Replay Query Matching</text>
  
  <!-- Timeline -->
  <line x1="50" y1="200" x2="750" y2="200" stroke="#333" stroke-width="2"/>
  
  <!-- Time markers -->
  <text x="50" y="220" font-family="Arial, sans-serif" font-size="12" fill="#666">2:00 PM</text>
  <text x="200" y="220" font-family="Arial, sans-serif" font-size="12" fill="#666">2:02 PM</text>
  <text x="350" y="220" font-family="Arial, sans-serif" font-size="12" fill="#666">2:04 PM</text>
  <text x="500" y="220" font-family="Arial, sans-serif" font-size="12" fill="#666">2:06 PM</text>
  <text x="650" y="220" font-family="Arial, sans-serif" font-size="12" fill="#666">2:08 PM</text>
  
  <!-- Time tick marks -->
  <line x1="50" y1="195" x2="50" y2="205" stroke="#333" stroke-width="2"/>
  <line x1="200" y1="195" x2="200" y2="205" stroke="#333" stroke-width="2"/>
  <line x1="350" y1="195" x2="350" y2="205" stroke="#333" stroke-width="2"/>
  <line x1="500" y1="195" x2="500" y2="205" stroke="#333" stroke-width="2"/>
  <line x1="650" y1="195" x2="650" y2="205" stroke="#333" stroke-width="2"/>
  
  <!-- Queried Events (bounding box) -->
  <rect x="200" y="160" width="300" height="80" fill="#e3f2fd" stroke="#1976d2" stroke-width="2" stroke-dasharray="5,5" opacity="0.7"/>
  <text x="350" y="145" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#1976d2">Queried Events</text>
  <text x="350" y="160" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#1976d2">(Bounding Box)</text>
  
  <!-- Event markers within queried range -->
  <circle cx="250" cy="200" r="6" fill="#1976d2"/>
  <circle cx="300" cy="200" r="6" fill="#1976d2"/>
  <circle cx="400" cy="200" r="6" fill="#1976d2"/>
  <circle cx="450" cy="200" r="6" fill="#1976d2"/>
  
  <!-- Matching Replay -->
  <rect x="100" y="250" width="450" height="40" fill="#c8e6c9" stroke="#388e3c" stroke-width="2" rx="5"/>
  <text x="325" y="270" font-family="Arial, sans-serif" font-size="12" font-weight="bold" text-anchor="middle" fill="#2e7d32">✓ Matching Replay</text>
  <text x="325" y="285" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#2e7d32">Same Session ID • Starts before • Ends after</text>
  
  <!-- Arrows showing coverage -->
  <line x1="100" y1="270" x2="200" y2="200" stroke="#388e3c" stroke-width="1.5" stroke-dasharray="3,3" marker-end="url(#arrowhead-green)"/>
  <line x1="550" y1="270" x2="500" y2="200" stroke="#388e3c" stroke-width="1.5" stroke-dasharray="3,3" marker-end="url(#arrowhead-green)"/>
  
  <!-- Labels for arrows -->
  <text x="150" y="230" font-family="Arial, sans-serif" font-size="10" fill="#388e3c" font-weight="bold">Starts before</text>
  <text x="520" y="230" font-family="Arial, sans-serif" font-size="10" fill="#388e3c" font-weight="bold">Ends after</text>
  
  <!-- Non-matching Replay (ends too soon) -->
  <rect x="100" y="310" width="250" height="35" fill="#ffcdd2" stroke="#c62828" stroke-width="2" rx="5" opacity="0.8"/>
  <text x="225" y="328" font-family="Arial, sans-serif" font-size="11" font-weight="bold" text-anchor="middle" fill="#c62828">✗ Doesn't Match</text>
  <text x="225" y="340" font-family="Arial, sans-serif" font-size="9" text-anchor="middle" fill="#c62828">Ends before last event</text>
  
  <!-- Arrow showing it doesn't cover -->
  <line x1="350" y1="327" x2="450" y2="200" stroke="#c62828" stroke-width="1.5" stroke-dasharray="3,3" marker-end="url(#arrowhead-red)"/>
  <text x="400" y="260" font-family="Arial, sans-serif" font-size="9" fill="#c62828" font-weight="bold">Missing coverage</text>
  
  <!-- Non-matching Replay (starts too late) -->
  <rect x="250" y="360" width="300" height="35" fill="#ffcdd2" stroke="#c62828" stroke-width="2" rx="5" opacity="0.8"/>
  <text x="400" y="378" font-family="Arial, sans-serif" font-size="11" font-weight="bold" text-anchor="middle" fill="#c62828">✗ Doesn't Match</text>
  <text x="400" y="390" font-family="Arial, sans-serif" font-size="9" text-anchor="middle" fill="#c62828">Starts after first event</text>
  
  <!-- Arrow showing it doesn't cover the beginning -->
  <line x1="250" y1="377" x2="200" y2="200" stroke="#c62828" stroke-width="1.5" stroke-dasharray="3,3" marker-end="url(#arrowhead-red)"/>
  <text x="220" y="290" font-family="Arial, sans-serif" font-size="9" fill="#c62828" font-weight="bold">Missing start</text>
  
  <!-- Legend -->
  <rect x="50" y="410" width="700" height="60" fill="#f5f5f5" stroke="#ddd" stroke-width="1" rx="5"/>
  <text x="60" y="430" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#333">Matching Criteria:</text>
  
  <circle cx="80" cy="450" r="5" fill="#1976d2"/>
  <text x="95" y="455" font-family="Arial, sans-serif" font-size="11" fill="#333">Queried events</text>
  
  <rect x="200" y="445" width="20" height="10" fill="#c8e6c9" stroke="#388e3c" stroke-width="1"/>
  <text x="230" y="455" font-family="Arial, sans-serif" font-size="11" fill="#333">Matching replay (covers all events)</text>
  
  <rect x="450" y="445" width="20" height="10" fill="#ffcdd2" stroke="#c62828" stroke-width="1" opacity="0.8"/>
  <text x="480" y="455" font-family="Arial, sans-serif" font-size="11" fill="#333">Non-matching replay</text>
  
  <!-- Arrow marker definitions -->
  <defs>
    <marker id="arrowhead-green" markerWidth="10" markerHeight="10" refX="5" refY="3" orient="auto">
      <polygon points="0 0, 10 3, 0 6" fill="#388e3c"/>
    </marker>
    <marker id="arrowhead-red" markerWidth="10" markerHeight="10" refX="5" refY="3" orient="auto">
      <polygon points="0 0, 10 3, 0 6" fill="#c62828"/>
    </marker>
  </defs>
  
  <!-- Session ID label -->
  <text x="60" y="100" font-family="Arial, sans-serif" font-size="11" fill="#666">Session ID: Must match</text>
</svg>

