<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%); } }
Login to leave a comment
No comments yet. Be the first!
View Project
No comments yet. Be the first!