<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="heroGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
    </linearGradient>
    <radialGradient id="ballGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#ffd700;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#ff8c00;stop-opacity:1" />
    </radialGradient>
  </defs>
  
  <!-- Background -->
  <rect width="800" height="600" fill="url(#heroGradient)"/>
  
  <!-- Football field pattern -->
  <rect x="50" y="100" width="700" height="400" fill="none" stroke="#fff" stroke-width="3" opacity="0.3"/>
  <line x1="400" y1="100" x2="400" y2="500" stroke="#fff" stroke-width="2" opacity="0.3"/>
  <circle cx="400" cy="300" r="50" fill="none" stroke="#fff" stroke-width="2" opacity="0.3"/>
  
  <!-- Football balls -->
  <circle cx="150" cy="200" r="25" fill="url(#ballGradient)"/>
  <path d="M140 190 L160 210 M160 190 L140 210" stroke="#1e3c72" stroke-width="2"/>
  
  <circle cx="650" cy="400" r="20" fill="url(#ballGradient)"/>
  <path d="M642 392 L658 408 M658 392 L642 408" stroke="#1e3c72" stroke-width="2"/>
  
  <circle cx="300" cy="450" r="15" fill="url(#ballGradient)"/>
  <path d="M294 444 L306 456 M306 444 L294 456" stroke="#1e3c72" stroke-width="2"/>
  
  <!-- Score numbers -->
  <text x="200" y="350" font-family="Arial, sans-serif" font-size="48" font-weight="bold" fill="#ffd700">8</text>
  <text x="250" y="350" font-family="Arial, sans-serif" font-size="48" font-weight="bold" fill="#fff">0</text>
  <text x="300" y="350" font-family="Arial, sans-serif" font-size="48" font-weight="bold" fill="#ffd700">8</text>
  
  <!-- Live indicator -->
  <circle cx="350" cy="320" r="8" fill="#e74c3c"/>
  <text x="370" y="325" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#fff">LIVE</text>
  
  <!-- Decorative elements -->
  <circle cx="100" cy="100" r="3" fill="#fff" opacity="0.6"/>
  <circle cx="700" cy="150" r="2" fill="#fff" opacity="0.6"/>
  <circle cx="750" cy="300" r="4" fill="#fff" opacity="0.6"/>
  <circle cx="50" cy="500" r="3" fill="#fff" opacity="0.6"/>
  <circle cx="750" cy="550" r="2" fill="#fff" opacity="0.6"/>
</svg> 