zero-knowledge file sharing
wavy pattern
+31
-10
+31
-10
web/src/pages/Upload.tsx
+31
-10
web/src/pages/Upload.tsx
···
24
24
const CENTER = RADIUS + 10;
25
25
const SIZE = CENTER * 2;
26
26
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
27
+
const WAVE_AMP = 3;
28
+
const WAVE_LEN = RADIUS; // one full wave period
29
+
30
+
const wavePath = () => {
31
+
const topY = CENTER - RADIUS + 2 * RADIUS * (1 - progress() / 100);
32
+
const left = CENTER - RADIUS - WAVE_LEN;
33
+
const right = CENTER + RADIUS + WAVE_LEN;
34
+
const bottom = CENTER + RADIUS;
35
+
let d = `M ${left} ${bottom} V ${topY}`;
36
+
for (let x = left; x < right; x += WAVE_LEN / 2) {
37
+
const cx = x + WAVE_LEN / 4;
38
+
const ex = x + WAVE_LEN / 2;
39
+
const dir =
40
+
((x - left) / (WAVE_LEN / 2)) % 2 === 0 ? -WAVE_AMP : WAVE_AMP;
41
+
d += ` Q ${cx} ${topY + dir} ${ex} ${topY}`;
42
+
}
43
+
d += ` V ${bottom} Z`;
44
+
return d;
45
+
};
27
46
28
47
let prevRatio = 0;
29
48
const sizeRatio = createMemo(() => {
···
193
212
<circle cx={CENTER} cy={CENTER} r={RADIUS - 2.5} />
194
213
</clipPath>
195
214
</defs>
215
+
<style>{`@keyframes wave { from { transform: translateX(0) } to { transform: translateX(-${WAVE_LEN}px) } }`}</style>
196
216
<circle
197
217
cx={CENTER}
198
218
cy={CENTER}
···
219
239
}}
220
240
/>
221
241
{/* Upload liquid fill */}
222
-
<rect
223
-
x={CENTER - RADIUS}
224
-
y={CENTER - RADIUS + 2 * RADIUS * (1 - progress() / 100)}
225
-
width={2 * RADIUS}
226
-
height={2 * RADIUS * (progress() / 100)}
227
-
fill="var(--color-accent)"
228
-
opacity="0.15"
229
-
clip-path="url(#circle-clip)"
230
-
class="transition-all duration-300 ease-out"
231
-
/>
242
+
<g clip-path="url(#circle-clip)">
243
+
<path
244
+
d={wavePath()}
245
+
fill="var(--color-accent)"
246
+
opacity="0.15"
247
+
style={{
248
+
transition: "d 300ms ease-out",
249
+
animation: uploading() ? `wave 2s linear infinite` : "none",
250
+
}}
251
+
/>
252
+
</g>
232
253
</svg>
233
254
234
255
<div class="z-10 flex flex-col items-center gap-1.5 text-center">