<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" fill="none">
  <!-- Background gradient -->
  <defs>
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:0.1" />
      <stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:0.1" />
    </linearGradient>
    <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#2563EB;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="purpleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#7C3AED;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="greenGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#10B981;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
    </linearGradient>
  </defs>

  <!-- Background -->
  <rect width="800" height="600" fill="url(#bgGradient)"/>

  <!-- Main container -->
  <g transform="translate(100, 100)">
    <!-- Input box -->
    <rect x="0" y="0" width="280" height="120" rx="12" fill="white" stroke="#E5E7EB" stroke-width="2"/>
    <text x="20" y="35" font-family="Arial, sans-serif" font-size="14" fill="#6B7280" font-weight="600">Input Text</text>
    <text x="20" y="65" font-family="'Courier New', monospace" font-size="18" fill="#1F2937">Hello World</text>
    <text x="20" y="90" font-family="'Courier New', monospace" font-size="14" fill="#9CA3AF">user_first_name</text>
  </g>

  <!-- Arrow indicators -->
  <g transform="translate(400, 200)">
    <!-- Arrow 1 -->
    <path d="M -20 -80 L 40 -40" stroke="url(#blueGradient)" stroke-width="3" fill="none" marker-end="url(#arrowBlue)"/>
    <!-- Arrow 2 -->
    <path d="M -20 0 L 40 0" stroke="url(#purpleGradient)" stroke-width="3" fill="none" marker-end="url(#arrowPurple)"/>
    <!-- Arrow 3 -->
    <path d="M -20 80 L 40 40" stroke="url(#greenGradient)" stroke-width="3" fill="none" marker-end="url(#arrowGreen)"/>
  </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="arrowPurple" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#8B5CF6" />
    </marker>
    <marker id="arrowGreen" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#10B981" />
    </marker>
  </defs>

  <!-- Output boxes -->
  <!-- camelCase -->
  <g transform="translate(460, 80)">
    <rect x="0" y="0" width="240" height="80" rx="8" fill="url(#blueGradient)" opacity="0.9"/>
    <text x="16" y="30" font-family="Arial, sans-serif" font-size="13" fill="white" font-weight="600">camelCase</text>
    <text x="16" y="55" font-family="'Courier New', monospace" font-size="16" fill="white">helloWorld</text>
  </g>

  <!-- snake_case -->
  <g transform="translate(460, 180)">
    <rect x="0" y="0" width="240" height="80" rx="8" fill="url(#purpleGradient)" opacity="0.9"/>
    <text x="16" y="30" font-family="Arial, sans-serif" font-size="13" fill="white" font-weight="600">snake_case</text>
    <text x="16" y="55" font-family="'Courier New', monospace" font-size="16" fill="white">user_first_name</text>
  </g>

  <!-- kebab-case -->
  <g transform="translate(460, 280)">
    <rect x="0" y="0" width="240" height="80" rx="8" fill="url(#greenGradient)" opacity="0.9"/>
    <text x="16" y="30" font-family="Arial, sans-serif" font-size="13" fill="white" font-weight="600">kebab-case</text>
    <text x="16" y="55" font-family="'Courier New', monospace" font-size="16" fill="white">hello-world</text>
  </g>

  <!-- Title Case -->
  <g transform="translate(460, 380)">
    <rect x="0" y="0" width="240" height="80" rx="8" fill="#F59E0B" opacity="0.9"/>
    <text x="16" y="30" font-family="Arial, sans-serif" font-size="13" fill="white" font-weight="600">Title Case</text>
    <text x="16" y="55" font-family="'Courier New', monospace" font-size="16" fill="white">Hello World</text>
  </g>

  <!-- Decorative code symbols -->
  <g transform="translate(50, 400)" opacity="0.3">
    <text font-family="'Courier New', monospace" font-size="24" fill="#3B82F6">{}</text>
  </g>
  <g transform="translate(720, 120)" opacity="0.3">
    <text font-family="'Courier New', monospace" font-size="24" fill="#8B5CF6">[]</text>
  </g>
  <g transform="translate(80, 520)" opacity="0.3">
    <text font-family="'Courier New', monospace" font-size="20" fill="#10B981">&lt;/&gt;</text>
  </g>

  <!-- Title -->
  <text x="400" y="550" font-family="Arial, sans-serif" font-size="28" fill="#1F2937" font-weight="700" text-anchor="middle">Case Converter</text>
  <text x="400" y="580" font-family="Arial, sans-serif" font-size="16" fill="#6B7280" text-anchor="middle">Convert text to 15+ case formats instantly</text>
</svg>
