<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <rect width="400" height="400" fill="#f3f4f6"/>

  <!-- Encode/Decode Toggle -->
  <g transform="translate(100, 40)">
    <rect x="0" y="0" width="200" height="50" rx="8" fill="white" stroke="#d1d5db" stroke-width="2"/>
    <rect x="2" y="2" width="96" height="46" rx="6" fill="#3b82f6"/>
    <text x="50" y="33" text-anchor="middle" font-family="system-ui" font-size="14" fill="white" font-weight="600">ENCODE</text>
    <text x="150" y="33" text-anchor="middle" font-family="system-ui" font-size="14" fill="#6b7280" font-weight="600">DECODE</text>
  </g>

  <!-- Input Text Box -->
  <g transform="translate(40, 110)">
    <rect x="0" y="0" width="150" height="100" rx="8" fill="white" stroke="#d1d5db" stroke-width="2"/>
    <text x="10" y="20" font-family="system-ui" font-size="10" fill="#6b7280" font-weight="600">INPUT</text>
    <text x="10" y="40" font-family="monospace" font-size="11" fill="#1f2937">Hello World!</text>
    <text x="10" y="56" font-family="monospace" font-size="11" fill="#1f2937">Price: $99.99</text>
    <text x="10" y="72" font-family="monospace" font-size="11" fill="#1f2937">Category &amp; Type</text>
    <circle cx="135" cy="10" r="3" fill="#10b981"/>
  </g>

  <!-- Processing Arrow -->
  <g transform="translate(200, 160)">
    <line x1="0" y1="0" x2="50" y2="0" stroke="#3b82f6" stroke-width="3" marker-end="url(#arrowhead)"/>
    <!-- Percent symbols floating -->
    <text x="10" y="-10" font-family="monospace" font-size="16" fill="#8b5cf6" font-weight="bold">%</text>
    <text x="30" y="-15" font-family="monospace" font-size="14" fill="#3b82f6" font-weight="bold">%</text>
    <text x="20" y="15" font-family="monospace" font-size="12" fill="#10b981" font-weight="bold">2</text>
    <text x="35" y="18" font-family="monospace" font-size="12" fill="#f59e0b" font-weight="bold">0</text>
  </g>

  <!-- Arrow marker -->
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
      <polygon points="0 0, 10 3, 0 6" fill="#3b82f6"/>
    </marker>
  </defs>

  <!-- Output Text Box (Encoded) -->
  <g transform="translate(260, 110)">
    <rect x="0" y="0" width="100" height="100" rx="8" fill="#dbeafe" stroke="#3b82f6" stroke-width="2"/>
    <text x="10" y="20" font-family="system-ui" font-size="10" fill="#1e40af" font-weight="600">ENCODED</text>
    <text x="10" y="40" font-family="monospace" font-size="9" fill="#1e3a8a">Hello%20</text>
    <text x="10" y="52" font-family="monospace" font-size="9" fill="#1e3a8a">World%21</text>
    <text x="10" y="64" font-family="monospace" font-size="9" fill="#1e3a8a">Price%3A%20</text>
    <text x="10" y="76" font-family="monospace" font-size="9" fill="#1e3a8a">%2499.99</text>
    <circle cx="85" cy="10" r="3" fill="#3b82f6"/>
  </g>

  <!-- Encoding Types Display -->
  <g transform="translate(40, 230)">
    <rect x="0" y="0" width="320" height="130" rx="8" fill="white" stroke="#d1d5db" stroke-width="2"/>

    <!-- Title -->
    <text x="10" y="20" font-family="system-ui" font-size="12" fill="#1f2937" font-weight="600">Encoding Types</text>

    <!-- Type 1: Component -->
    <rect x="10" y="30" width="145" height="38" rx="6" fill="#dbeafe" stroke="#3b82f6" stroke-width="1.5"/>
    <text x="15" y="45" font-family="system-ui" font-size="9" fill="#1e40af" font-weight="600">encodeURIComponent</text>
    <text x="15" y="60" font-family="monospace" font-size="8" fill="#1e3a8a">Hello%20World%21</text>

    <!-- Type 2: URI -->
    <rect x="165" y="30" width="145" height="38" rx="6" fill="#ddd6fe" stroke="#8b5cf6" stroke-width="1.5"/>
    <text x="170" y="45" font-family="system-ui" font-size="9" fill="#5b21b6" font-weight="600">encodeURI</text>
    <text x="170" y="60" font-family="monospace" font-size="8" fill="#4c1d95">Hello%20World!</text>

    <!-- Type 3: Query -->
    <rect x="10" y="77" width="145" height="38" rx="6" fill="#d1fae5" stroke="#10b981" stroke-width="1.5"/>
    <text x="15" y="92" font-family="system-ui" font-size="9" fill="#047857" font-weight="600">Query String</text>
    <text x="15" y="107" font-family="monospace" font-size="8" fill="#065f46">Hello+World%21</text>

    <!-- Type 4: Base64 -->
    <rect x="165" y="77" width="145" height="38" rx="6" fill="#fef3c7" stroke="#f59e0b" stroke-width="1.5"/>
    <text x="170" y="92" font-family="system-ui" font-size="9" fill="#92400e" font-weight="600">Base64 URL-safe</text>
    <text x="170" y="107" font-family="monospace" font-size="8" fill="#78350f">SGVsbG8gV29ybGQh</text>
  </g>

  <!-- Character Examples -->
  <g transform="translate(50, 375)">
    <circle cx="0" cy="0" r="15" fill="#3b82f6" opacity="0.2"/>
    <text x="0" y="5" text-anchor="middle" font-family="monospace" font-size="14" fill="#3b82f6" font-weight="bold">%</text>

    <circle cx="35" cy="0" r="15" fill="#8b5cf6" opacity="0.2"/>
    <text x="35" y="5" text-anchor="middle" font-family="monospace" font-size="14" fill="#8b5cf6" font-weight="bold">&amp;</text>

    <circle cx="70" cy="0" r="15" fill="#10b981" opacity="0.2"/>
    <text x="70" y="5" text-anchor="middle" font-family="monospace" font-size="14" fill="#10b981" font-weight="bold">=</text>

    <circle cx="105" cy="0" r="15" fill="#f59e0b" opacity="0.2"/>
    <text x="105" y="5" text-anchor="middle" font-family="monospace" font-size="14" fill="#f59e0b" font-weight="bold">?</text>

    <text x="140" y="5" font-family="system-ui" font-size="11" fill="#6b7280">→ Encoded</text>

    <circle cx="215" cy="0" r="15" fill="#ef4444" opacity="0.2"/>
    <text x="215" y="5" text-anchor="middle" font-family="monospace" font-size="10" fill="#ef4444" font-weight="bold">%20</text>

    <circle cx="255" cy="0" r="15" fill="#ec4899" opacity="0.2"/>
    <text x="255" y="5" text-anchor="middle" font-family="monospace" font-size="10" fill="#ec4899" font-weight="bold">%26</text>

    <circle cx="295" cy="0" r="15" fill="#06b6d4" opacity="0.2"/>
    <text x="295" y="5" text-anchor="middle" font-family="monospace" font-size="10" fill="#06b6d4" font-weight="bold">%3D</text>
  </g>

  <text x="200" y="25" text-anchor="middle" font-family="system-ui" font-size="16" font-weight="600" fill="#1f2937">URL Encoder/Decoder</text>
</svg>
