<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <!-- Background gradient -->
  <defs>
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#eff6ff;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#dbeafe;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="codeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#2563eb;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="successGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <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="400" height="400" fill="url(#bgGradient)"/>

  <!-- Decorative code symbols in background -->
  <g opacity="0.1">
    <text x="50" y="80" font-family="monospace" font-size="24" fill="#3b82f6">&lt;/&gt;</text>
    <text x="320" y="120" font-family="monospace" font-size="20" fill="#3b82f6">{ }</text>
    <text x="60" y="320" font-family="monospace" font-size="18" fill="#3b82f6">[ ]</text>
    <text x="300" y="340" font-family="monospace" font-size="22" fill="#3b82f6">=&gt;</text>
  </g>

  <!-- Main code editor window - Messy code (left) -->
  <g transform="translate(40, 80)">
    <!-- Window frame -->
    <rect x="0" y="0" width="130" height="160" rx="8" fill="white" stroke="#e5e7eb" stroke-width="2"/>

    <!-- Window header -->
    <rect x="0" y="0" width="130" height="30" rx="8" fill="#f3f4f6"/>
    <circle cx="15" cy="15" r="4" fill="#ef4444"/>
    <circle cx="28" cy="15" r="4" fill="#f59e0b"/>
    <circle cx="41" cy="15" r="4" fill="#eab308"/>

    <!-- Messy code lines (unformatted) -->
    <rect x="10" y="45" width="70" height="4" rx="2" fill="#6b7280"/>
    <rect x="10" y="55" width="85" height="4" rx="2" fill="#3b82f6"/>
    <rect x="20" y="65" width="60" height="4" rx="2" fill="#8b5cf6"/>
    <rect x="10" y="75" width="95" height="4" rx="2" fill="#3b82f6"/>
    <rect x="15" y="85" width="50" height="4" rx="2" fill="#10b981"/>
    <rect x="10" y="95" width="80" height="4" rx="2" fill="#6b7280"/>
    <rect x="25" y="105" width="70" height="4" rx="2" fill="#3b82f6"/>
    <rect x="10" y="115" width="65" height="4" rx="2" fill="#8b5cf6"/>
    <rect x="20" y="125" width="55" height="4" rx="2" fill="#10b981"/>
    <rect x="10" y="135" width="75" height="4" rx="2" fill="#6b7280"/>
  </g>

  <!-- Arrow with magic sparkles -->
  <g transform="translate(200, 155)">
    <!-- Arrow -->
    <path d="M -20 0 L 20 0 L 15 -5 M 20 0 L 15 5" stroke="url(#codeGradient)" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>

    <!-- Sparkles -->
    <g fill="#fbbf24">
      <path d="M -10 -15 L -8 -12 L -10 -9 L -12 -12 Z"/>
      <path d="M 5 -20 L 8 -16 L 5 -12 L 2 -16 Z"/>
      <path d="M -15 10 L -12 13 L -15 16 L -18 13 Z"/>
      <path d="M 10 15 L 12 18 L 10 21 L 8 18 Z"/>
      <circle cx="-5" cy="12" r="2"/>
      <circle cx="15" cy="-8" r="2"/>
    </g>
  </g>

  <!-- Main code editor window - Beautified code (right) -->
  <g transform="translate(230, 80)">
    <!-- Window frame -->
    <rect x="0" y="0" width="130" height="160" rx="8" fill="white" stroke="#10b981" stroke-width="2"/>

    <!-- Window header -->
    <rect x="0" y="0" width="130" height="30" rx="8" fill="#f0fdf4"/>
    <circle cx="15" cy="15" r="4" fill="#10b981"/>
    <circle cx="28" cy="15" r="4" fill="#10b981"/>
    <circle cx="41" cy="15" r="4" fill="#10b981"/>

    <!-- Beautified code lines (formatted with proper indentation) -->
    <rect x="10" y="45" width="60" height="4" rx="2" fill="#6b7280"/>
    <rect x="15" y="55" width="75" height="4" rx="2" fill="#3b82f6"/>
    <rect x="20" y="65" width="70" height="4" rx="2" fill="#8b5cf6"/>
    <rect x="20" y="75" width="65" height="4" rx="2" fill="#10b981"/>
    <rect x="15" y="85" width="80" height="4" rx="2" fill="#3b82f6"/>
    <rect x="10" y="95" width="55" height="4" rx="2" fill="#6b7280"/>
    <rect x="15" y="105" width="70" height="4" rx="2" fill="#3b82f6"/>
    <rect x="20" y="115" width="60" height="4" rx="2" fill="#8b5cf6"/>
    <rect x="15" y="125" width="75" height="4" rx="2" fill="#10b981"/>
    <rect x="10" y="135" width="65" height="4" rx="2" fill="#6b7280"/>
  </g>

  <!-- Bottom section - Language icons -->
  <g transform="translate(80, 280)">
    <!-- JavaScript icon -->
    <rect x="0" y="0" width="50" height="50" rx="8" fill="#f7df1e"/>
    <text x="25" y="35" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#000" text-anchor="middle">JS</text>
  </g>

  <g transform="translate(145, 280)">
    <!-- HTML icon -->
    <rect x="0" y="0" width="50" height="50" rx="8" fill="#e34c26"/>
    <text x="25" y="32" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="white" text-anchor="middle">HTML</text>
  </g>

  <g transform="translate(210, 280)">
    <!-- CSS icon -->
    <rect x="0" y="0" width="50" height="50" rx="8" fill="#264de4"/>
    <text x="25" y="35" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="white" text-anchor="middle">CSS</text>
  </g>

  <g transform="translate(275, 280)">
    <!-- SQL icon -->
    <rect x="0" y="0" width="50" height="50" rx="8" fill="#0074a3"/>
    <text x="25" y="35" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="white" text-anchor="middle">SQL</text>
  </g>

  <!-- Check mark badge -->
  <g transform="translate(320, 60)">
    <circle cx="0" cy="0" r="28" fill="url(#successGradient)"/>
    <path d="M -10 0 L -5 8 L 12 -10" stroke="white" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
  </g>

  <!-- Decorative code brackets -->
  <g transform="translate(60, 260)" fill="none" stroke="#3b82f6" stroke-width="2">
    <path d="M 0 0 L -5 0 L -5 20 L 0 20"/>
  </g>

  <g transform="translate(340, 260)" fill="none" stroke="#3b82f6" stroke-width="2">
    <path d="M 0 0 L 5 0 L 5 20 L 0 20"/>
  </g>
</svg>
