Spaces:

awacke1
/

SVG-Animation-On-Top-of-the-World

Running

App Files Files Community

awacke1 commited on Dec 8, 2024

Commit

253bb2c

verified ·

1 Parent(s): 53f053f

Update index.html

Browse files

Files changed (1) hide show

index.html +65 -175

index.html CHANGED Viewed

@@ -5,219 +5,109 @@
     .scene-container {
       width: 100%;
       height: 800px;
-      background: linear-gradient(
-        to bottom,
-        #1a233a 0%,
-        #2d4065 20%,
-        #4f7ab3 50%,
-        #85b1e0 75%,
-        #b7d9f9 100%
-      );
       position: relative;
       overflow: hidden;
     }
-    /* Waterfall base styles */
     .waterfall-container {
       position: absolute;
       left: 400px;
       top: 200px;
-      width: 120px;
       height: 300px;
-      overflow: visible;
-    }
-    /* River container */
-    .river-container {
-      position: absolute;
-      bottom: 100px;
-      width: 100%;
-      height: 150px;
       overflow: hidden;
-      transform: perspective(1000px) rotateX(30deg);
-      transform-origin: bottom;
     }
-    /* Particle animations */
-    @keyframes particleFlow {
-      0% {
-        transform: translate3d(0, -100%, 0) rotate(0deg);
-        opacity: 0;
-      }
-      10% { opacity: 1; }
-      90% { opacity: 1; }
-      100% {
-        transform: translate3d(var(--translateX, 0), 100%, var(--translateZ, 0)) rotate(360deg);
-        opacity: 0;
-      }
     }
-    @keyframes whitewaterFloat {
-      0% {
-        transform: translate3d(-100%, 0, 0);
-        opacity: 0;
-      }
-      10% { opacity: 1; }
-      90% { opacity: 1; }
-      100% {
-        transform: translate3d(100%, 0, 0);
-        opacity: 0;
-      }
     }
-    /* Mist effect */
     .mist {
       position: absolute;
-      width: 200px;
-      height: 100px;
-      left: 360px;
       bottom: 160px;
       background: radial-gradient(
         ellipse at center,
-        rgba(255, 255, 255, 0.7) 0%,
-        rgba(255, 255, 255, 0.3) 40%,
         rgba(255, 255, 255, 0) 70%
       );
-      filter: blur(4px);
-      animation: mistPulse 4s ease-in-out infinite alternate;
     }
-    @keyframes mistPulse {
-      0% {
-        opacity: 0.4;
-        transform: translate(0, 0) scale(1);
-      }
-      100% {
-        opacity: 0.7;
-        transform: translate(-10px, -15px) scale(1.1);
-      }
     }
-    .splash {
-      position: absolute;
-      bottom: 250px;
-      left: 380px;
-      width: 160px;
-      height: 40px;
-      filter: blur(2px);
     }
   </style>
 </head>
 <body>
   <div class="scene-container">
-    <!-- Main waterfall and river SVG -->
-    <svg width="100%" height="100%" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
       <defs>
-        <!-- Gradients -->
-        <linearGradient id="waterGradient" x1="0%" y1="0%" x2="100%" y2="0%">
-          <stop offset="0%" style="stop-color:rgba(173,216,230,0.9)"/>
-          <stop offset="50%" style="stop-color:rgba(135,206,235,0.8)"/>
-          <stop offset="100%" style="stop-color:rgba(173,216,230,0.9)"/>
         </linearGradient>
-        <!-- Filters -->
-        <filter id="waterBlur" x="-50%" y="-50%" width="200%" height="200%">
-          <feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
-          <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.8 0"/>
-        </filter>
-        <!-- Curved path for waterfall -->
-        <path id="waterfallPath" d="M0,0 C20,-10 40,10 60,0 S80,-10 100,0" />
-        <!-- River flow path -->
-        <path id="riverFlowPath" d="M0,50 C200,20 400,80 600,50 S800,20 1000,50 S1200,80 1400,50" />
-        <!-- Animation paths -->
-        <animateMotion id="flowAnimation" dur="3s" repeatCount="indefinite">
-          <mpath href="#riverFlowPath"/>
-        </animateMotion>
       </defs>
-      <!-- Layered waterfall -->
-      <g class="waterfall">
-        <!-- Base water column -->
-        <use href="#waterfallPath" stroke="rgba(173,216,230,0.8)" stroke-width="80" filter="url(#waterBlur)">
-          <animate attributeName="d"
-                   dur="2s"
-                   repeatCount="indefinite"
-                   values="M0,0 C20,-10 40,10 60,0 S80,-10 100,0;
-                          M0,0 C20,10 40,-10 60,0 S80,10 100,0;
-                          M0,0 C20,-10 40,10 60,0 S80,-10 100,0"/>
-        </use>
-        <!-- Transparent overlays for depth -->
-        <use href="#waterfallPath" stroke="rgba(255,255,255,0.4)" stroke-width="60" filter="url(#waterBlur)"/>
-        <use href="#waterfallPath" stroke="rgba(173,216,230,0.6)" stroke-width="40" filter="url(#waterBlur)"/>
-      </g>
-      <!-- River with whitewater -->
-      <g class="river" transform="translate(0,600)">
-        <!-- Base river flow -->
-        <use href="#riverFlowPath" stroke="url(#waterGradient)" stroke-width="150" filter="url(#waterBlur)"/>
-        <!-- Whitewater patterns -->
-        <g class="whitewater">
-          <circle r="5" fill="rgba(255,255,255,0.6)" filter="url(#waterBlur)">
-            <animateMotion dur="4s" repeatCount="indefinite">
-              <mpath href="#riverFlowPath"/>
-            </animateMotion>
-          </circle>
-          <!-- Multiple whitewater particles with varying speeds and opacities -->
-          <!-- Generated dynamically via JavaScript -->
-        </g>
-      </g>
     </svg>
-    <!-- Dynamic particle system -->
-    <script>
-      function createWaterParticles() {
-        const waterfall = document.querySelector('.waterfall-container');
-        const river = document.querySelector('.river-container');
-        // Create waterfall particles
-        for (let i = 0; i < 50; i++) {
-          const particle = document.createElement('div');
-          particle.className = 'water-particle';
-          particle.style.cssText = `
-            position: absolute;
-            width: ${2 + Math.random() * 4}px;
-            height: ${2 + Math.random() * 4}px;
-            background: rgba(255, 255, 255, ${0.3 + Math.random() * 0.4});
-            border-radius: 50%;
-            left: ${Math.random() * 100}%;
-            animation: particleFlow ${2 + Math.random() * 2}s linear infinite;
-            animation-delay: ${Math.random() * 2}s;
-            filter: blur(1px);
-          `;
-          waterfall.appendChild(particle);
-        }
-        // Create river whitewater
-        for (let i = 0; i < 30; i++) {
-          const foam = document.createElement('div');
-          foam.className = 'whitewater-particle';
-          foam.style.cssText = `
-            position: absolute;
-            width: ${5 + Math.random() * 10}px;
-            height: ${5 + Math.random() * 10}px;
-            background: rgba(255, 255, 255, ${0.4 + Math.random() * 0.3});
-            border-radius: 50%;
-            top: ${Math.random() * 100}%;
-            animation: whitewaterFloat ${5 + Math.random() * 5}s linear infinite;
-            animation-delay: ${Math.random() * 5}s;
-            filter: blur(2px);
-          `;
-          river.appendChild(foam);
-        }
-      }
-      // Initialize particle systems
-      createWaterParticles();
-    </script>
-    <!-- Mist and splash effects -->
     <div class="mist"></div>
-    <div class="splash"></div>
   </div>
 </body>
 </html>

     .scene-container {
       width: 100%;
       height: 800px;
+      background: linear-gradient(#1B4B8A, #3A6FB0 40%, #87CEEB 70%);
       position: relative;
       overflow: hidden;
     }
+    /* Simple but effective waterfall */
     .waterfall-container {
       position: absolute;
       left: 400px;
       top: 200px;
+      width: 80px;
       height: 300px;
       overflow: hidden;
+      border-radius: 40px 40px 0 0;
     }
+    .waterfall-stream {
+      width: 100%;
+      height: 200%;
+      background: linear-gradient(180deg,
+        rgba(255, 255, 255, 0.8),
+        rgba(173, 216, 230, 0.9),
+        rgba(173, 216, 230, 0.7),
+        rgba(173, 216, 230, 0.8)
+      );
+      animation: waterfall 2s linear infinite;
+      filter: blur(2px);
     }
+    /* Basic river with animation */
+    .river {
+      position: absolute;
+      width: 200%;
+      height: 100px;
+      bottom: 100px;
+      left: -50%;
+      background: linear-gradient(90deg,
+        rgba(173, 216, 230, 0.8),
+        rgba(173, 216, 230, 0.9),
+        rgba(255, 255, 255, 0.6),
+        rgba(173, 216, 230, 0.9),
+        rgba(173, 216, 230, 0.8)
+      );
+      animation: riverFlow 8s linear infinite;
+      transform: perspective(500px) rotateX(30deg);
+      transform-origin: bottom;
     }
+    /* Simple mist effect */
     .mist {
       position: absolute;
+      width: 120px;
+      height: 40px;
+      left: 380px;
       bottom: 160px;
       background: radial-gradient(
         ellipse at center,
+        rgba(255, 255, 255, 0.6) 0%,
         rgba(255, 255, 255, 0) 70%
       );
+      filter: blur(3px);
+      animation: mist 3s ease-in-out infinite alternate;
     }
+    @keyframes waterfall {
+      0% { transform: translateY(-50%); }
+      100% { transform: translateY(0); }
     }
+    @keyframes riverFlow {
+      0% { transform: perspective(500px) rotateX(30deg) translateX(0); }
+      100% { transform: perspective(500px) rotateX(30deg) translateX(-50%); }
+    }
+    @keyframes mist {
+      0% { opacity: 0.4; transform: translateY(0); }
+      100% { opacity: 0.7; transform: translateY(-10px); }
     }
   </style>
 </head>
 <body>
   <div class="scene-container">
+    <!-- Basic background -->
+    <svg width="100%" height="100%" viewBox="0 0 1200 800">
       <defs>
+        <linearGradient id="rockGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" style="stop-color:#8B4513"/>
+          <stop offset="50%" style="stop-color:#A0522D"/>
+          <stop offset="100%" style="stop-color:#8B4513"/>
         </linearGradient>
       </defs>
+      <!-- Simple cliff face -->
+      <path d="M0,200 Q300,100 600,250 T1200,200 V800 H0 Z"
+            fill="url(#rockGradient)"/>
     </svg>
+    <!-- Working water effects -->
+    <div class="waterfall-container">
+      <div class="waterfall-stream"></div>
+    </div>
     <div class="mist"></div>
+    <div class="river"></div>
   </div>
 </body>
 </html>