<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 680 780" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
  <defs>
    <!-- Arrow markers -->
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#2563EB">
    </marker>

    <!-- Drop shadow for depth -->
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2">
      <feOffset dx="1" dy="1" result="offsetblur">
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.2">
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic">
      </feMerge>
    </filter>
  </defs>



  <!-- Beautiful gradient definitions for depth -->
  

  <!-- White background with subtle border -->
  <rect x="0" y="0" width="680" height="780" fill="#F9FAFB" stroke="#9CA3AF" stroke-width="2" rx="8">

  <!-- Content container with proper margins -->
  <g transform="translate(40, 40)">
  <!-- Define gradients and effects -->
  

  <!-- Background -->
  <rect x="0" y="0" width="600" height="700" fill="#4B5563" rx="8" filter="url(#shadow)">

  <!-- Title -->
  <rect x="150" y="10" width="300" height="35" fill="rgba(99, 102, 241, 0.05)" rx="8" filter="url(#shadow)">
  <text x="300" y="33" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" font-weight="600" fill="#4B5563">
    API Request Flow
  </text>

  <!-- HTTP Request -->
  <rect x="200" y="60" width="200" height="50" fill="url(#requestGrad)" stroke="#2563EB" stroke-width="2" rx="8" filter="url(#shadow)">
  <text x="300" y="85" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#4B5563">
    HTTP Request
  </text>
  <text x="300" y="100" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563">
    Client → Server
  </text>

  <!-- Arrow down -->
  <path d="M 300 110 L 300 140" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7">

  <!-- Rate Limit -->
  <rect x="200" y="140" width="200" height="60" fill="url(#rateLimitGrad)" stroke="#2563EB" stroke-width="2" rx="8" filter="url(#shadow)">
  <text x="300" y="165" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#4B5563">
    Rate Limit
  </text>
  <text x="300" y="185" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563">
    Check request limits
  </text>

  <!-- Pass/Fail paths -->
  <path d="M 300 200 L 300 230" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7">
  <text x="320" y="215" text-anchor="start" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="500" fill="#4B5563" filter="url(#textShadow)">Pass</text>

  <path d="M 400 170 L 480 170 L 480 650" stroke="url(#failPath)" stroke-width="2" stroke-dasharray="5,3" fill="none" marker-end="url(#arrowFail)" opacity="0.5">
  <text x="420" y="165" text-anchor="start" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">429 Too Many</text>

  <!-- Auth -->
  <rect x="200" y="230" width="200" height="60" fill="url(#authGrad)" stroke="#2563EB" stroke-width="2" rx="8" filter="url(#shadow)">
  <text x="300" y="255" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#4B5563">
    Auth
  </text>
  <text x="300" y="275" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563">
    Validate token/session
  </text>

  <!-- Pass/Fail paths -->
  <path d="M 300 290 L 300 320" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7">
  <text x="320" y="305" text-anchor="start" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="500" fill="#4B5563" filter="url(#textShadow)">Valid</text>

  <path d="M 400 260 L 460 260 L 460 650" stroke="url(#failPath)" stroke-width="2" stroke-dasharray="5,3" fill="none" marker-end="url(#arrowFail)" opacity="0.5">
  <text x="420" y="255" text-anchor="start" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">401 Unauthorized</text>

  <!-- Route -->
  <rect x="200" y="320" width="200" height="60" fill="url(#routeGrad)" stroke="#2563EB" stroke-width="2" rx="8" filter="url(#shadow)">
  <text x="300" y="345" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#4B5563">
    Route
  </text>
  <text x="300" y="365" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563">
    Match endpoint pattern
  </text>

  <!-- Arrow down -->
  <path d="M 300 380 L 300 410" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7">

  <path d="M 400 350 L 440 350 L 440 650" stroke="url(#failPath)" stroke-width="2" stroke-dasharray="5,3" fill="none" marker-end="url(#arrowFail)" opacity="0.5">
  <text x="420" y="345" text-anchor="start" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">404 Not Found</text>

  <!-- Validate -->
  <rect x="200" y="410" width="200" height="60" fill="url(#validateGrad)" stroke="#2563EB" stroke-width="2" rx="8" filter="url(#shadow)">
  <text x="300" y="435" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#4B5563">
    Validate
  </text>
  <text x="300" y="455" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563">
    Check request body
  </text>

  <!-- Pass/Fail paths -->
  <path d="M 300 470 L 300 500" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7">
  <text x="320" y="485" text-anchor="start" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="500" fill="#4B5563" filter="url(#textShadow)">Valid</text>

  <path d="M 400 440 L 420 440 L 420 650" stroke="url(#failPath)" stroke-width="2" stroke-dasharray="5,3" fill="none" marker-end="url(#arrowFail)" opacity="0.5">
  <text x="425" y="435" text-anchor="start" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">400 Bad Request</text>

  <!-- Process -->
  <rect x="200" y="500" width="200" height="60" fill="url(#processGrad)" stroke="#2563EB" stroke-width="2" rx="8" filter="url(#shadow)">
  <text x="300" y="525" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#4B5563">
    Process
  </text>
  <text x="300" y="545" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563">
    Execute business logic
  </text>

  <!-- Arrow down -->
  <path d="M 300 560 L 300 590" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7">

  <!-- Format -->
  <rect x="200" y="590" width="200" height="60" fill="url(#formatGrad)" stroke="#2563EB" stroke-width="2" rx="8" filter="url(#shadow)">
  <text x="300" y="615" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#4B5563">
    Format
  </text>
  <text x="300" y="635" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563">
    JSON response
  </text>

  <!-- Arrow down -->
  <path d="M 300 650 L 300 680" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7">

  <!-- HTTP Response -->
  <rect x="200" y="680" width="200" height="50" fill="url(#responseGrad)" stroke="#2563EB" stroke-width="2" rx="8" filter="url(#shadow)">
  <text x="300" y="705" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#4B5563">
    HTTP Response
  </text>
  <text x="300" y="720" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563">
    Server → Client
  </text>

  <!-- Error Response box -->
  <rect x="410" y="650" width="100" height="30" fill="rgba(239, 68, 68, 0.1)" stroke="#2563EB" stroke-width="2" rx="6" filter="url(#shadow)">
  <text x="460" y="670" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="500" fill="#4B5563">
    Error Response
  </text>

  <!-- Side labels -->
  <g transform="translate(50, 380)">
    <text x="0" y="0" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" transform="rotate(-90)">
      Request Pipeline
    </text>
  </g>

  <!-- Status indicators -->
  <g transform="translate(80, 150)">
    <circle cx="0" cy="0" r="4" fill="#4B5563">
    <text x="10" y="4" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Success path</text>
  </g>

  <g transform="translate(80, 170)">
    <circle cx="0" cy="0" r="4" fill="#1F2937">
    <text x="10" y="4" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Error path</text>
  </g>


  </g>

</svg>