Hugging Face's logo

Spaces:
awacke1
/
SVG-Animation-On-Top-of-the-World
Running

App Files Community
awacke1 commited on
Commit
753d71d
·
verified ·
1 Parent(s): 7d9f4aa

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +210 -18
index.html CHANGED
@@ -1,19 +1,211 @@
1
- <!doctype html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <style>
5
+ .scene-container {
6
+ width: 100%;
7
+ height: 800px;
8
+ background: linear-gradient(
9
+ to bottom,
10
+ #1a233a 0%,
11
+ #2d4065 20%,
12
+ #4f7ab3 50%,
13
+ #85b1e0 75%,
14
+ #b7d9f9 100%
15
+ );
16
+ position: relative;
17
+ overflow: hidden;
18
+ }
19
+
20
+ /* Enhanced waterfall effects */
21
+ .waterfall-container {
22
+ position: absolute;
23
+ left: 400px;
24
+ top: 200px;
25
+ width: 80px;
26
+ height: 300px;
27
+ overflow: hidden;
28
+ filter: blur(1px);
29
+ }
30
+
31
+ .waterfall-stream {
32
+ position: absolute;
33
+ width: 100%;
34
+ height: 400%;
35
+ background: repeating-linear-gradient(
36
+ 180deg,
37
+ rgba(255, 255, 255, 0.8) 0%,
38
+ rgba(255, 255, 255, 0.2) 15%,
39
+ rgba(173, 216, 230, 0.4) 25%,
40
+ rgba(173, 216, 230, 0.6) 35%,
41
+ rgba(173, 216, 230, 0.8) 45%,
42
+ rgba(173, 216, 230, 0.6) 55%,
43
+ rgba(173, 216, 230, 0.4) 65%,
44
+ rgba(255, 255, 255, 0.2) 85%,
45
+ rgba(255, 255, 255, 0.8) 100%
46
+ );
47
+ animation: waterfall 4s linear infinite;
48
+ }
49
+
50
+ /* Mist effect */
51
+ .mist {
52
+ position: absolute;
53
+ width: 120px;
54
+ height: 60px;
55
+ left: 380px;
56
+ bottom: 160px;
57
+ background: radial-gradient(
58
+ ellipse at center,
59
+ rgba(255, 255, 255, 0.6) 0%,
60
+ rgba(255, 255, 255, 0.3) 40%,
61
+ rgba(255, 255, 255, 0) 70%
62
+ );
63
+ filter: blur(3px);
64
+ animation: mist 3s ease-in-out infinite alternate;
65
+ }
66
+
67
+ /* Enhanced river with realistic flow */
68
+ .river {
69
+ position: absolute;
70
+ width: 100%;
71
+ height: 120px;
72
+ bottom: 100px;
73
+ background:
74
+ linear-gradient(
75
+ 90deg,
76
+ rgba(173, 216, 230, 0.8),
77
+ rgba(135, 206, 235, 0.9),
78
+ rgba(173, 216, 230, 0.8)
79
+ ),
80
+ url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0,50 Q25,40 50,50 T100,50" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="2"/></svg>');
81
+ background-size: 200% 100%, 100px 100px;
82
+ animation: riverFlow 8s linear infinite;
83
+ transform: perspective(500px) rotateX(30deg);
84
+ transform-origin: bottom;
85
+ }
86
+
87
+ /* Detailed climber with gear */
88
+ .climber {
89
+ position: absolute;
90
+ width: 40px;
91
+ height: 60px;
92
+ filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
93
+ }
94
+
95
+ @keyframes waterfall {
96
+ 0% { transform: translateY(-75%); }
97
+ 100% { transform: translateY(0%); }
98
+ }
99
+
100
+ @keyframes riverFlow {
101
+ 0% { background-position: 0% 0%, 0 0; }
102
+ 100% { background-position: 200% 0%, 100px 0; }
103
+ }
104
+
105
+ @keyframes mist {
106
+ 0% { opacity: 0.4; transform: translateY(0); }
107
+ 100% { opacity: 0.7; transform: translateY(-10px); }
108
+ }
109
+
110
+ @keyframes climb {
111
+ 0% { transform: translate(0, 0) rotate(var(--rotation, 0deg)); }
112
+ 25% { transform: translate(30px, -45px) rotate(var(--rotation, 5deg)); }
113
+ 50% { transform: translate(60px, -90px) rotate(var(--rotation, -5deg)); }
114
+ 75% { transform: translate(90px, -135px) rotate(var(--rotation, 5deg)); }
115
+ 100% { transform: translate(120px, -180px) rotate(var(--rotation, 0deg)); }
116
+ }
117
+
118
+ .climber1 { left: 300px; top: 500px; animation: climb 8s infinite alternate; --rotation: 0deg; }
119
+ .climber2 { left: 500px; top: 450px; animation: climb 8s infinite alternate; animation-delay: -2s; --rotation: 5deg; }
120
+ .climber3 { left: 700px; top: 480px; animation: climb 8s infinite alternate; animation-delay: -4s; --rotation: -5deg; }
121
+ </style>
122
+ </head>
123
+ <body>
124
+ <div class="scene-container">
125
+ <!-- Base landscape -->
126
+ <svg width="100%" height="100%" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
127
+ <!-- Complex cliff texture with multiple layers -->
128
+ <defs>
129
+ <linearGradient id="rockGradient" x1="0%" y1="0%" x2="0%" y2="100%">
130
+ <stop offset="0%" style="stop-color:#8B4513"/>
131
+ <stop offset="25%" style="stop-color:#A0522D"/>
132
+ <stop offset="50%" style="stop-color:#8B4513"/>
133
+ <stop offset="75%" style="stop-color:#6B4423"/>
134
+ <stop offset="100%" style="stop-color:#593122"/>
135
+ </linearGradient>
136
+ <filter id="rockTexture">
137
+ <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="5"/>
138
+ <feDisplacementMap in="SourceGraphic" scale="20"/>
139
+ </filter>
140
+ </defs>
141
+
142
+ <!-- Main cliff face -->
143
+ <path d="M0,200 Q300,100 600,250 T1200,200 V800 H0 Z"
144
+ fill="url(#rockGradient)"
145
+ filter="url(#rockTexture)"/>
146
+
147
+ <!-- Detailed rock formations -->
148
+ <g transform="translate(0,100)" opacity="0.9">
149
+ <path d="M0,300 Q200,250 400,300 T800,280 T1200,300 V800 H0 Z"
150
+ fill="#8B4513" filter="url(#rockTexture)"/>
151
+ <path d="M0,400 Q200,350 400,400 T800,380 T1200,400 V800 H0 Z"
152
+ fill="#A0522D" filter="url(#rockTexture)"/>
153
+ </g>
154
+ </svg>
155
+
156
+ <!-- Water effects -->
157
+ <div class="waterfall-container">
158
+ <div class="waterfall-stream"></div>
159
+ </div>
160
+ <div class="mist"></div>
161
+ <div class="river"></div>
162
+
163
+ <!-- Detailed climbers -->
164
+ <svg class="climber climber1" viewBox="0 0 40 60">
165
+ <!-- Body -->
166
+ <path d="M20,10 L20,35 M15,20 L25,20 M20,35 L15,50 M20,35 L25,50"
167
+ stroke="#333" stroke-width="3" stroke-linecap="round"/>
168
+ <!-- Climbing gear -->
169
+ <path d="M15,25 L25,25 M18,30 L22,30"
170
+ stroke="#666" stroke-width="2"/>
171
+ <!-- Helmet -->
172
+ <path d="M15,8 Q20,5 25,8 Q25,12 20,12 Q15,12 15,8"
173
+ fill="#ff4444"/>
174
+ <!-- Harness -->
175
+ <path d="M18,32 Q20,30 22,32"
176
+ stroke="#888" stroke-width="2" fill="none"/>
177
+ <!-- Rope -->
178
+ <path d="M20,32 C30,32 30,0 20,0"
179
+ stroke="#eee" stroke-width="1" fill="none"/>
180
+ </svg>
181
+
182
+ <svg class="climber climber2" viewBox="0 0 40 60">
183
+ <!-- Similar detailed climber structure with different colors -->
184
+ <path d="M20,10 L20,35 M15,20 L25,20 M20,35 L15,50 M20,35 L25,50"
185
+ stroke="#333" stroke-width="3" stroke-linecap="round"/>
186
+ <path d="M15,25 L25,25 M18,30 L22,30"
187
+ stroke="#666" stroke-width="2"/>
188
+ <path d="M15,8 Q20,5 25,8 Q25,12 20,12 Q15,12 15,8"
189
+ fill="#4444ff"/>
190
+ <path d="M18,32 Q20,30 22,32"
191
+ stroke="#888" stroke-width="2" fill="none"/>
192
+ <path d="M20,32 C30,32 30,0 20,0"
193
+ stroke="#eee" stroke-width="1" fill="none"/>
194
+ </svg>
195
+
196
+ <svg class="climber climber3" viewBox="0 0 40 60">
197
+ <!-- Similar detailed climber structure with different colors -->
198
+ <path d="M20,10 L20,35 M15,20 L25,20 M20,35 L15,50 M20,35 L25,50"
199
+ stroke="#333" stroke-width="3" stroke-linecap="round"/>
200
+ <path d="M15,25 L25,25 M18,30 L22,30"
201
+ stroke="#666" stroke-width="2"/>
202
+ <path d="M15,8 Q20,5 25,8 Q25,12 20,12 Q15,12 15,8"
203
+ fill="#44ff44"/>
204
+ <path d="M18,32 Q20,30 22,32"
205
+ stroke="#888" stroke-width="2" fill="none"/>
206
+ <path d="M20,32 C30,32 30,0 20,0"
207
+ stroke="#eee" stroke-width="1" fill="none"/>
208
+ </svg>
209
+ </div>
210
+ </body>
211
+ </html>