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

  <!-- Binary/Text representation -->
  <g transform="translate(50, 80)">
    <!-- Left side - Text -->
    <rect x="0" y="0" width="120" height="240" rx="8" fill="white" stroke="#1f2937" stroke-width="2"/>
    <text x="60" y="30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="600" fill="#6b7280">Plain Text</text>

    <!-- Text lines -->
    <line x1="15" y1="60" x2="105" y2="60" stroke="#3b82f6" stroke-width="3" stroke-linecap="round"/>
    <line x1="15" y1="80" x2="85" y2="80" stroke="#3b82f6" stroke-width="3" stroke-linecap="round"/>
    <line x1="15" y1="100" x2="95" y2="100" stroke="#3b82f6" stroke-width="3" stroke-linecap="round"/>
    <line x1="15" y1="120" x2="75" y2="120" stroke="#3b82f6" stroke-width="3" stroke-linecap="round"/>
    <line x1="15" y1="160" x2="105" y2="160" stroke="#10b981" stroke-width="3" stroke-linecap="round"/>
    <line x1="15" y1="180" x2="90" y2="180" stroke="#10b981" stroke-width="3" stroke-linecap="round"/>
    <line x1="15" y1="200" x2="80" y2="200" stroke="#10b981" stroke-width="3" stroke-linecap="round"/>

    <!-- Center - Conversion arrows -->
    <g transform="translate(140, 120)">
      <!-- Encode arrow (right) -->
      <path d="M 0 -20 L 40 -20" stroke="#3b82f6" stroke-width="3" fill="none" marker-end="url(#arrowBlue)"/>
      <text x="20" y="-30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#3b82f6">Encode</text>

      <!-- Decode arrow (left) -->
      <path d="M 40 20 L 0 20" stroke="#10b981" stroke-width="3" fill="none" marker-end="url(#arrowGreen)"/>
      <text x="20" y="35" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#10b981">Decode</text>
    </g>

    <!-- Right side - Base64 -->
    <rect x="180" y="0" width="120" height="240" rx="8" fill="white" stroke="#1f2937" stroke-width="2"/>
    <text x="240" y="30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="600" fill="#6b7280">Base64</text>

    <!-- Base64 character blocks -->
    <g fill="#1f2937" font-family="'Courier New', monospace" font-size="11" font-weight="600">
      <text x="195" y="65">SGVs</text>
      <text x="230" y="65">bG8g</text>
      <text x="265" y="65">V29y</text>

      <text x="195" y="85">bGQh</text>
      <text x="230" y="85">IFRo</text>
      <text x="265" y="85">aXMg</text>

      <text x="195" y="105">aXMg</text>
      <text x="230" y="105">YSB0</text>
      <text x="265" y="105">ZXN0</text>

      <text x="195" y="125">IG1l</text>
      <text x="230" y="125">c3Nh</text>
      <text x="265" y="125">Z2Uh</text>

      <text x="195" y="165" fill="#10b981">QmFz</text>
      <text x="230" y="165" fill="#10b981">ZTY0</text>
      <text x="265" y="165" fill="#10b981">IGVu</text>

      <text x="195" y="185" fill="#10b981">Y29k</text>
      <text x="230" y="185" fill="#10b981">ZWQg</text>
      <text x="265" y="185" fill="#10b981">ZGF0</text>

      <text x="195" y="205" fill="#10b981">YSBi</text>
      <text x="230" y="205" fill="#10b981">eXRl</text>
      <text x="265" y="205" fill="#10b981">cw==</text>
    </g>
  </g>

  <!-- File/Image icon at bottom -->
  <g transform="translate(150, 320)">
    <rect x="0" y="0" width="100" height="60" rx="6" fill="white" stroke="#3b82f6" stroke-width="2"/>
    <path d="M 20 20 L 30 10 L 80 10 L 80 50 L 20 50 Z" fill="none" stroke="#3b82f6" stroke-width="2"/>
    <path d="M 30 10 L 30 20 L 20 20" fill="none" stroke="#3b82f6" stroke-width="2"/>
    <line x1="30" y1="30" x2="70" y2="30" stroke="#3b82f6" stroke-width="2"/>
    <line x1="30" y1="38" x2="65" y2="38" stroke="#3b82f6" stroke-width="2"/>
  </g>

  <!-- Arrow markers -->
  <defs>
    <marker id="arrowBlue" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#3b82f6"/>
    </marker>
    <marker id="arrowGreen" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M9,0 L9,6 L0,3 z" fill="#10b981"/>
    </marker>
  </defs>

  <!-- Bottom text -->
  <text x="200" y="370" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="600" fill="#6b7280">Encode &amp; Decode Base64</text>
</svg>
