<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" fill="none">
  <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="cardGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#f8fafc;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="blueGradient" 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>
    <filter id="shadow">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-opacity="0.1"/>
    </filter>
  </defs>

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

  <!-- Grid pattern -->
  <g opacity="0.3">
    <path d="M0,50 L800,50 M0,150 L800,150 M0,250 L800,250 M0,350 L800,350 M0,450 L800,450 M0,550 L800,550"
          stroke="#3b82f6" stroke-width="0.5" opacity="0.3"/>
    <path d="M100,0 L100,600 M200,0 L200,600 M300,0 L300,600 M400,0 L400,600 M500,0 L500,600 M600,0 L600,600 M700,0 L700,600"
          stroke="#3b82f6" stroke-width="0.5" opacity="0.3"/>
  </g>

  <!-- Main card container -->
  <g filter="url(#shadow)">
    <rect x="100" y="100" width="600" height="400" rx="16" fill="url(#cardGradient)" stroke="#e2e8f0" stroke-width="2"/>
  </g>

  <!-- Header section -->
  <text x="400" y="150" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="#1e293b" text-anchor="middle">UUID Generator</text>
  <text x="400" y="180" font-family="Arial, sans-serif" font-size="14" fill="#64748b" text-anchor="middle">Universally Unique Identifier</text>

  <!-- UUID display boxes -->
  <g>
    <!-- First UUID box -->
    <rect x="130" y="220" width="540" height="60" rx="8" fill="#eff6ff" stroke="#3b82f6" stroke-width="2"/>
    <text x="400" y="255" font-family="Courier New, monospace" font-size="18" font-weight="600" fill="#1e40af" text-anchor="middle">550e8400-e29b-41d4-a716-446655440000</text>

    <!-- UUID version badges -->
    <g transform="translate(130, 300)">
      <!-- v1 badge -->
      <rect x="0" y="0" width="80" height="32" rx="16" fill="#dbeafe" stroke="#3b82f6" stroke-width="1"/>
      <text x="40" y="21" font-family="Arial, sans-serif" font-size="12" font-weight="600" fill="#1e40af" text-anchor="middle">UUID v1</text>

      <!-- v4 badge -->
      <rect x="90" y="0" width="80" height="32" rx="16" fill="#3b82f6" stroke="#3b82f6" stroke-width="1"/>
      <text x="130" y="21" font-family="Arial, sans-serif" font-size="12" font-weight="600" fill="#ffffff" text-anchor="middle">UUID v4</text>

      <!-- GUID badge -->
      <rect x="180" y="0" width="70" height="32" rx="16" fill="#dbeafe" stroke="#3b82f6" stroke-width="1"/>
      <text x="215" y="21" font-family="Arial, sans-serif" font-size="12" font-weight="600" fill="#1e40af" text-anchor="middle">GUID</text>

      <!-- Nil badge -->
      <rect x="260" y="0" width="60" height="32" rx="16" fill="#dbeafe" stroke="#3b82f6" stroke-width="1"/>
      <text x="290" y="21" font-family="Arial, sans-serif" font-size="12" font-weight="600" fill="#1e40af" text-anchor="middle">Nil</text>
    </g>
  </g>

  <!-- Feature icons -->
  <g>
    <!-- Bulk generation icon -->
    <g transform="translate(140, 360)">
      <circle cx="20" cy="20" r="18" fill="#eff6ff" stroke="#3b82f6" stroke-width="2"/>
      <text x="20" y="27" font-family="Arial, sans-serif" font-size="20" fill="#3b82f6" text-anchor="middle">📋</text>
      <text x="20" y="55" font-family="Arial, sans-serif" font-size="11" fill="#64748b" text-anchor="middle">Bulk</text>
    </g>

    <!-- Format options icon -->
    <g transform="translate(240, 360)">
      <circle cx="20" cy="20" r="18" fill="#eff6ff" stroke="#3b82f6" stroke-width="2"/>
      <text x="20" y="27" font-family="Arial, sans-serif" font-size="20" fill="#3b82f6" text-anchor="middle">🎨</text>
      <text x="20" y="55" font-family="Arial, sans-serif" font-size="11" fill="#64748b" text-anchor="middle">Format</text>
    </g>

    <!-- Validation icon -->
    <g transform="translate(340, 360)">
      <circle cx="20" cy="20" r="18" fill="#eff6ff" stroke="#3b82f6" stroke-width="2"/>
      <text x="20" y="27" font-family="Arial, sans-serif" font-size="20" fill="#3b82f6" text-anchor="middle">✅</text>
      <text x="20" y="55" font-family="Arial, sans-serif" font-size="11" fill="#64748b" text-anchor="middle">Validate</text>
    </g>

    <!-- Export icon -->
    <g transform="translate(440, 360)">
      <circle cx="20" cy="20" r="18" fill="#eff6ff" stroke="#3b82f6" stroke-width="2"/>
      <text x="20" y="27" font-family="Arial, sans-serif" font-size="20" fill="#3b82f6" text-anchor="middle">💾</text>
      <text x="20" y="55" font-family="Arial, sans-serif" font-size="11" fill="#64748b" text-anchor="middle">Export</text>
    </g>

    <!-- Security icon -->
    <g transform="translate(540, 360)">
      <circle cx="20" cy="20" r="18" fill="#eff6ff" stroke="#3b82f6" stroke-width="2"/>
      <text x="20" y="27" font-family="Arial, sans-serif" font-size="20" fill="#3b82f6" text-anchor="middle">🔒</text>
      <text x="20" y="55" font-family="Arial, sans-serif" font-size="11" fill="#64748b" text-anchor="middle">Secure</text>
    </g>

    <!-- Speed icon -->
    <g transform="translate(640, 360)">
      <circle cx="20" cy="20" r="18" fill="#eff6ff" stroke="#3b82f6" stroke-width="2"/>
      <text x="20" y="27" font-family="Arial, sans-serif" font-size="20" fill="#3b82f6" text-anchor="middle">⚡</text>
      <text x="20" y="55" font-family="Arial, sans-serif" font-size="11" fill="#64748b" text-anchor="middle">Instant</text>
    </g>
  </g>

  <!-- Generate button -->
  <g transform="translate(300, 440)">
    <rect x="0" y="0" width="200" height="44" rx="22" fill="url(#blueGradient)"/>
    <text x="100" y="28" font-family="Arial, sans-serif" font-size="16" font-weight="600" fill="#ffffff" text-anchor="middle">🔄 Generate UUID</text>
  </g>

  <!-- Decorative elements -->
  <g opacity="0.4">
    <!-- Top-left accent -->
    <circle cx="80" cy="80" r="4" fill="#3b82f6"/>
    <circle cx="740" cy="80" r="4" fill="#8b5cf6"/>

    <!-- Bottom accent -->
    <circle cx="80" cy="520" r="4" fill="#8b5cf6"/>
    <circle cx="740" cy="520" r="4" fill="#3b82f6"/>
  </g>

  <!-- Code-like patterns in background -->
  <g opacity="0.15" font-family="Courier New, monospace" font-size="10" fill="#3b82f6">
    <text x="30" y="30">const uuid = crypto.randomUUID();</text>
    <text x="30" y="570">UUID: 550e8400-e29b-41d4-a716-446655440000</text>
    <text x="550" y="570">Version: RFC 4122</text>
  </g>
</svg>
