Animated SVG Background

<div class="svg-container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
    <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#4a2c1a;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#6b3e2e;stop-opacity:1" />
      </linearGradient>
      <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#3d2314;stop-opacity:0.8" />
        <stop offset="100%" style="stop-color:#5c3826;stop-opacity:0.6" />
      </linearGradient>
    </defs>

    <!-- Background -->
    <rect width="1200" height="800" fill="#2c1810"/>

    <!-- Animated circles -->
    <circle class="circle" cx="200" cy="150" r="120" fill="url(#grad1)" opacity="0.3"/>
    <circle class="circle" cx="900" cy="600" r="150" fill="url(#grad1)" opacity="0.25"/>
    <circle class="circle" cx="600" cy="400" r="100" fill="url(#grad2)" opacity="0.35"/>
    <circle class="circle" cx="1000" cy="200" r="130" fill="url(#grad2)" opacity="0.3"/>

    <!-- Animated wave -->
    <g class="wave">
      <path d="M0,400 Q300,350 600,400 T1200,400 T1800,400 V800 H0 Z" 
            fill="url(#grad2)" opacity="0.4"/>
    </g>
  </svg>
</div>

<div class="content">
  <h1>Animated SVG Background</h1>
  <p>Minimal & Professional Design</p>
</div>

  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #2c1810;
            overflow: hidden;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .svg-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        svg {
            width: 100%;
            height: 100%;
        }

        .content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: #e8d5c4;
            padding: 2rem;
        }

        h1 {
            font-size: 3rem;
            font-weight: 300;
            margin-bottom: 1rem;
            letter-spacing: 2px;
        }

        p {
            font-size: 1.2rem;
            opacity: 0.8;
        }

        .circle {
            animation: float 20s ease-in-out infinite;
        }

        .circle:nth-child(1) {
            animation-delay: 0s;
        }

        .circle:nth-child(2) {
            animation-delay: -5s;
        }

        .circle:nth-child(3) {
            animation-delay: -10s;
        }

        .circle:nth-child(4) {
            animation-delay: -15s;
        }

        @keyframes float {
            0%, 100% {
                transform: translate(0, 0) scale(1);
                opacity: 0.3;
            }
            25% {
                transform: translate(50px, -50px) scale(1.1);
                opacity: 0.5;
            }
            50% {
                transform: translate(-30px, 30px) scale(0.9);
                opacity: 0.4;
            }
            75% {
                transform: translate(30px, 50px) scale(1.05);
                opacity: 0.35;
            }
        }

        .wave {
            animation: wave 15s linear infinite;
        }

        @keyframes wave {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }