luna-hero.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" width="1200" height="400" role="img" aria-label="luna">
  <defs>
    <radialGradient id="sky" cx="50%" cy="35%" r="90%">
      <stop offset="0%" stop-color="#1a2140"/>
      <stop offset="45%" stop-color="#0f1630"/>
      <stop offset="100%" stop-color="#070a18"/>
    </radialGradient>
    <radialGradient id="glow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#8fe3c4" stop-opacity="0.55"/>
      <stop offset="60%" stop-color="#4fd1a5" stop-opacity="0.12"/>
      <stop offset="100%" stop-color="#4fd1a5" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="aurora" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#00ff88" stop-opacity="0"/>
      <stop offset="35%" stop-color="#37e0a6" stop-opacity="0.35"/>
      <stop offset="65%" stop-color="#5ec8ff" stop-opacity="0.30"/>
      <stop offset="100%" stop-color="#00ff88" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="wordmark" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#8fffcf"/>
      <stop offset="50%" stop-color="#00ff88"/>
      <stop offset="100%" stop-color="#5ec8ff"/>
      <animateTransform attributeName="gradientTransform" type="translate" from="-0.4 0" to="0.4 0" dur="6s" repeatCount="indefinite" additive="sum"/>
    </linearGradient>
    <filter id="soft"><feGaussianBlur stdDeviation="6"/></filter>
  </defs>
  <rect width="1200" height="400" fill="url(#sky)"/>
  <g opacity="0.5">
    <path d="M0,250 Q300,180 600,240 T1200,220" fill="none" stroke="url(#aurora)" stroke-width="60" filter="url(#soft)">
      <animate attributeName="d" dur="12s" repeatCount="indefinite" values="M0,250 Q300,180 600,240 T1200,220;M0,240 Q300,260 600,200 T1200,250;M0,250 Q300,180 600,240 T1200,220"/>
    </path>
  </g>
  <g fill="#eafff5">
    <circle cx="140" cy="90" r="1.6"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.1s" repeatCount="indefinite"/></circle>
    <circle cx="320" cy="140" r="1.2"><animate attributeName="opacity" values="1;0.2;1" dur="4.2s" repeatCount="indefinite"/></circle>
    <circle cx="520" cy="70" r="1.8"><animate attributeName="opacity" values="0.3;1;0.3" dur="2.6s" repeatCount="indefinite"/></circle>
    <circle cx="760" cy="120" r="1.3"><animate attributeName="opacity" values="1;0.3;1" dur="3.7s" repeatCount="indefinite"/></circle>
    <circle cx="980" cy="80" r="1.6"><animate attributeName="opacity" values="0.2;1;0.2" dur="4.8s" repeatCount="indefinite"/></circle>
    <circle cx="1080" cy="170" r="1.2"><animate attributeName="opacity" values="1;0.25;1" dur="3.3s" repeatCount="indefinite"/></circle>
    <circle cx="220" cy="300" r="1.3"><animate attributeName="opacity" values="0.3;1;0.3" dur="3.9s" repeatCount="indefinite"/></circle>
    <circle cx="880" cy="300" r="1.5"><animate attributeName="opacity" values="1;0.3;1" dur="2.9s" repeatCount="indefinite"/></circle>
  </g>
  <g transform="translate(970,150)">
    <circle cx="0" cy="0" r="150" fill="url(#glow)"><animate attributeName="r" values="140;165;140" dur="6s" repeatCount="indefinite"/></circle>
    <g><animateTransform attributeName="transform" type="rotate" values="-6;6;-6" dur="9s" repeatCount="indefinite"/><path d="M0,-72 A72,72 0 1 0 0,72 A56,56 0 1 1 0,-72 Z" fill="#eafff5"/></g>
  </g>
  <text x="90" y="230" font-family="'Poppins','Segoe UI',sans-serif" font-size="120" font-weight="700" fill="url(#wordmark)" letter-spacing="2">luna</text>
  <text x="96" y="278" font-family="'Poppins','Segoe UI',sans-serif" font-size="24" font-weight="400" fill="#9fd8c4" letter-spacing="6">your soft glow in the late nights</text>
</svg>