landing.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="100%">
  <!-- Background -->
  <rect width="100%" height="100%" fill="#1e1e1e"/>

  <!-- Header -->
  <rect x="0" y="0" width="100%" height="10" fill="#2a2a2a"/>
  <text x="50%" y="5" alignment-baseline="middle" text-anchor="middle" fill="#fff" font-size="3" font-family="Arial, sans-serif">Thee Eclipse</text>

  <!-- Footer -->
  <rect x="0" y="90" width="100%" height="10" fill="#2a2a2a"/>
  <text x="50%" y="95" alignment-baseline="middle" text-anchor="middle" fill="red" font-size="2" font-family="Arial, sans-serif">Footer Text</text>

  <!-- Bouncing Bubbles -->
  <g>
    <circle cx="25" cy="75" r="5" fill="#00bfff" opacity="0.7">
      <animate attributeName="cy" values="75; 25; 75" dur="2s" repeatCount="indefinite" begin="0s" />
    </circle>
    <circle cx="50" cy="75" r="5" fill="#ff6347" opacity="0.7">
      <animate attributeName="cy" values="75; 25; 75" dur="2s" repeatCount="indefinite" begin="0.5s" />
    </circle>
    <circle cx="75" cy="75" r="5" fill="#00bfff" opacity="0.7">
      <animate attributeName="cy" values="75; 25; 75" dur="2s" repeatCount="indefinite" begin="1s" />
    </circle>
  </g>

  <!-- Text in the middle -->
  <text x="50%" y="50" alignment-baseline="middle" text-anchor="middle" fill="#fff" font-size="8" font-family="Arial, sans-serif">Knock Knock</text>
  <text x="60%" y="60" alignment-baseline="middle" text-anchor="middle" fill="purple" font-size="8" font-family="Arial, sans-serif">Just a POC</text>
</svg>