-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdonation.html
154 lines (120 loc) · 12.2 KB
/
donation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="images/Donation.png">
<title>Donation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
html, body {
width:100%;
height:100%;
overflow:hidden;
font-family: 'Space Mono', monospace;
letter-spacing:1.6px;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body id="swup" class="transition-fade" translate="no">
<svg width="100%" height="100%">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="65%">
<stop offset="10%" stop-color="#004476"></stop>
<stop offset="90%" stop-color="#006fbe"></stop>
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="85%">
<stop offset="0%" stop-color="#f5eacc"></stop>
<stop offset="80%" stop-color="#e0c677"></stop>
<stop offset="110%" stop-color="#ebd8a0"></stop>
</linearGradient>
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="85%">
<stop offset="0%" stop-color="#54e2fe"></stop>
<stop offset="80%" stop-color="#049afd"></stop>
<stop offset="110%" stop-color="#2aaffc"></stop>
</linearGradient>
<linearGradient id="grad4" x1="0%" y1="0%" x2="80%" y2="70%">
<stop offset="0%" stop-color="rgba(255,255,255,0.75)"></stop>
<stop offset="90%" stop-color="rgba(255,255,255,0.3)"></stop>
</linearGradient>
<pattern id="cardBg" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<image opacity="0.5" width="100" height="100" xlink:href="https://assets.codepen.io/721952/whiteNoise2.png"></image>
<image class="fillLight" opacity="0.5" width="100" height="100" xlink:href="https://assets.codepen.io/721952/whiteNoise.png" style="opacity: 0.0318;"></image>
</pattern>
<mask id="m">
<rect class="card" fill="#fff" width="340" height="540" rx="30" ry="30" data-svg-origin="170 270" transform="matrix(0.99947,0.03241,-0.03241,0.99947,208.8408,34.6334)" style="transform-origin: 0px 0px; opacity: 1;"></rect>
</mask>
</defs>
<rect fill="url(#grad1)" width="100%" height="100%"></rect>
<g class="main" data-svg-origin="-10 -26" style="transform-origin: 0px 0px;" transform="matrix(1,0,0,1,276,105.5)">
<circle class="ball bg" fill="url(#grad2)" cx="120" cy="130" r="130" data-svg-origin="120 130" transform="matrix(1,0,0,1,-96.823,7.0245)" style="transform-origin: 0px 0px; opacity: 1;"></circle>
<circle class="ball bg" fill="url(#grad3)" cx="550" cy="410" r="210" data-svg-origin="550 410" transform="matrix(1,0,0,1,-96.823,7.0245)" style="transform-origin: 0px 0px; opacity: 1;"></circle>
<g class="blur" mask="url(#m)">
<image class="bg" x="33" y="7" width="700" height="600" xlink:href="https://assets.codepen.io/721952/bgBlur.jpg" data-svg-origin="33 7" transform="matrix(1,0,0,1,-96.823,7.0245)" style="transform-origin: 0px 0px;"></image>
</g>
<g class="card" data-svg-origin="170.5 270.5" transform="matrix(0.99947,0.03241,-0.03241,0.99947,208.85727,34.61746)" style="transform-origin: 0px 0px; opacity: 1;">
<rect fill="none" stroke="#ccc" opacity="0.75" stroke-width="3" width="341" height="541" rx="31" ry="31"></rect>
<rect fill="url(#cardBg)" width="340" height="540" rx="30" ry="30" opacity="0.8"></rect>
<text class="numTxt" fill="#f0f0f0" font-size="23" data-svg-origin="0 -25.769241333007812" transform="matrix(1,0,0,1,22,375)" style="transform-origin: 0px 0px;">4377 7200 0137 4669</text>
<text class="nameTxt" fill="#e4e4f4" font-size="15" data-svg-origin="0 -16.849119186401367" transform="matrix(1,0,0,1,22,410)" style="transform-origin: 0px 0px;">LIBRETTO LAB</text>
<g class="chip" data-svg-origin="0 0" transform="matrix(1,0,0,1,148,66)" style="transform-origin: 0px 0px;">
<rect fill="url(#grad2)" width="58" height="76.5" rx="9" ry="9"></rect>
<path fill="none" opacity="0.8" stroke="#c9b678" d="M58,54.05 M0,25.72c2.11,0.21,3.75,0.47,4.03,0.74c2.92,3.64,5.83,7.28,8.67,10.98c0.77,1,1.52,1.72,2.89,1.47c0.95-0.18,1.28,0.3,1.27,1.25c-0.04,4.03-0.01,8.03-0.02,12.07c8.44,0,16.73,0,25.08,0c0-8.43,0-25.32,0-25.32l-26.77,0c0,0-1.95,0-1.95-1.96c-0.4-1.85-0.4-14.9-0.34-24.95 M45.96,0c0,8.65,0.01,18.65-0.01,24.19c-0.01,2.9,0.27,2.55-2.38,2.84c0,3.91,0,7.82,0,12.17c4.69-3.07,7.28-8.53,11.07-12.63C55,26.06,56.3,25.72,58,25.5 M58,54.05c-0.55,0-0.89,0.01-0.89,0.01c-2.46,0.26-9.33-10.83-12.02-13.2c-0.41-0.36-1.57,0.2-1.57,0.2s-0.02,7.37-0.02,11.13c2.56,0.32,2.56,0.32,2.56,2.77c0,4.4,0,12.9,0,21.04 M13.1,76c0.01-8.57,0.04-17.77,0.07-22.53c-0.01-0.82,0.36-1.2,1.17-1.17c0.28,0.01,1.03-0.06,1.03-0.06l0.05-11.81c0,0-1.73,0.15-2.12,0.72c-0.39,0.57-6.16,7.63-9.18,11.5C3.9,52.85,2.19,53.11,0,53.35"></path>
</g>
<path class="knot" opacity="0.82" fill="#eee" stroke="#eee" stroke-width="0.2" d="M57.29,25.64c0.22,3.8-1.46,7.05-2.79,10.39c0.22,6.27-2.65,12.28-7.79,15.91c-3.4,2.47-7.55,2.49-11.4,3.18c-4.9,3.24-11.44,3.87-16.76,1.25c-4.55-1.58-6.26-6.36-9.63-9.14c-4.95-2.36-7.89-7.5-8.72-12.77c-0.89-4.53,1.45-8.67,2.88-12.72C2.6,13.51,8.25,5.38,16.52,3.82c8.51-0.73,12.75-6.36,21.81-2.44c3.45,1.71,6.46,4.34,8.38,7.7C52.37,13.56,57.49,17.52,57.29,25.64z M10.66,40.61c-0.52,11.27,14.21,6.48,20.71,4.27c3.36-1.8,8.91-0.78,10.98-4.33c2.67-17.88,8.69-13.02-3.47-23.76c-0.89-0.91-1.69-1.92-2.65-2.76c-1.1-1.41,1.82-1.59,2.42-0.67c2.07,1.95,9.2,11.18,8.23,3.12c-1.46-13.3-22.26-1.65-30.14-0.84c-2.96,1.29-1.94,7.05-3.3,9.8c-1.15,5.17-4.42,8.14,1.03,11.95c0.88,1.24,9.41,7.1,6.03,7.74C17.85,45.86,10.2,32.65,10.66,40.61z M5.31,22.01c0.12,2.59,1.21,5.23,2.48,7.54c2.77,3.26,3.52-5.85,4.15-7.45c1.34-3.74,0.35-5.56-3.13-2.54c-3.69-0.81,2.33-4.29,3.8-4.75c1.92-1.05,2.18-3.61,3.4-5.31C22.23,1,3.36,9.19,5.31,22.01z M41.03,51.87c9.31-1.72,13.63-12.99,9.8-21.17c-0.93-3.34-3.13-4.76-3.83-0.36c-0.58,3.77-5.3,13.29,2.29,7.85c2.61,3.49-5.19,3.9-5.9,6.48c-0.69,1.5-1.26,3.13-2.29,4.44C40.25,49.87,39.05,51.76,41.03,51.87z M16.28,49.8c-4.06,0.84,3.39,4.83,4.79,5.32c1.61,0.7,10.41,1.61,9.27-1.45C20.53,47.6,26.36,50.17,16.28,49.8z M3.65,27.92c-2.58,1.17-1.11,7.02-0.69,9.38c0.99,1.58,3.19,7.3,5.45,5.38c0.46-1.18-0.51-2.41-0.19-3.66c-0.11-1.55,0.8-3.11,0.12-4.6c-1.05-1.81-2.66-3.26-3.31-5.3C4.77,28.36,4.27,27.92,3.65,27.92z M55.32,25.78c-0.18-2.59-0.65-5.49-2.15-7.78c-0.88-1.26-3.92-5.75-4.26-2.01c0.65,2.05,0.5,4.19,0.04,6.26c-0.03,1.93,1.99,3.11,2.62,4.85C53.69,32.33,55.05,30.04,55.32,25.78z M29.94,2.34c-7.72,0.84,1.81,4.22,3.78,5.86c1.45,0.64,3.12-0.08,4.64-0.17c1.26-0.41,2.77,0.64,3.81-0.33C41.66,3.44,33.77,1.68,29.94,2.34z M18.5,12.91c1.81-0.81,14.15-2.06,10.25-5.25c-2.13-0.65-4.59-2.36-6.81-1.65C20.69,7.03,15.07,12.18,18.5,12.91z M34.53,52.17c2.22-0.32,5.8-4.44,5.24-6.62c-0.97-1.12-6.7,1-8.21,1.52C23.58,48.62,30.53,51.77,34.53,52.17z" data-svg-origin="0.003491818904876709 0.004548549652099609" transform="matrix(1,0,0,1,22,250)" style="transform-origin: 0px 0px;"></path>
<path class="logo" fill="url(#grad4)" d="M100,31.88c0,0.02,0,0.04,0,0.05c-0.11-0.01-0.21-0.02-0.32-0.02c-2.3,0-4.6,0-6.9,0c-0.1,0-0.21-0.01-0.31-0.01c-0.34-1.59-0.66-3.15-0.99-4.72c-0.1,0-0.16-0.01-0.22-0.01c-3.29,0-6.58,0-9.88,0c-0.23,0-0.23,0-0.31,0.23c-0.49,1.43-0.99,2.86-1.48,4.29c-0.07,0.21-0.07,0.22-0.3,0.22c-2.69,0-5.38,0-8.07,0c-0.07,0-0.13-0.02-0.21-0.03c0.02-0.06,0.02-0.11,0.04-0.15c0.24-0.57,0.48-1.14,0.71-1.72c1.37-3.28,2.74-6.57,4.11-9.85c1.01-2.42,2.01-4.84,3.02-7.26c1.09-2.61,2.17-5.23,3.26-7.84c0.33-0.8,0.67-1.6,1.04-2.39c0.27-0.58,0.66-1.09,1.18-1.49c0.64-0.49,1.38-0.68,2.16-0.69c2.23-0.01,4.46,0,6.68,0c0.24,0,0.24,0,0.29,0.24c0.34,1.64,0.68,3.27,1.02,4.91c0.38,1.83,0.77,3.65,1.15,5.48c0.42,2.01,0.83,4.02,1.25,6.03c0.47,2.24,0.94,4.48,1.41,6.72c0.49,2.33,0.97,4.66,1.45,6.99C99.86,31.21,99.93,31.54,100,31.88z M87.75,9.17c-0.02,0-0.04-0.01-0.06-0.01c-1.38,3.85-2.77,7.71-4.16,11.58c2.25,0,4.46,0,6.69,0C89.39,16.88,88.57,13.03,87.75,9.17z M0,1.54c0.05,0.01,0.11,0.01,0.16,0.02c0.7,0.16,1.4,0.31,2.09,0.49c1.33,0.34,2.63,0.79,3.91,1.29c0.68,0.27,1.37,0.54,1.99,0.93C8.6,4.55,8.99,4.89,9.27,5.35c0.25,0.4,0.41,0.85,0.53,1.3c0.46,1.73,0.91,3.46,1.36,5.18c0.6,2.32,1.21,4.64,1.81,6.96c0.41,1.58,0.81,3.15,1.22,4.73c0.6,2.32,1.2,4.64,1.81,6.96c0.12,0.47,0.25,0.94,0.37,1.41c0.09,0.01,0.16,0.02,0.23,0.02c2.7,0,5.4,0,8.09,0c0.17,0,0.25-0.05,0.31-0.21c0.24-0.59,0.49-1.18,0.73-1.77c0.97-2.32,1.94-4.64,2.91-6.95c0.93-2.22,1.85-4.44,2.78-6.66c1.07-2.56,2.15-5.13,3.22-7.69c1.05-2.5,2.09-5,3.13-7.5c0.08-0.19,0.16-0.39,0.24-0.61c-2.86,0-5.68,0-8.52,0c-2.79,7.07-5.58,14.13-8.39,21.23c-0.03-0.1-0.06-0.16-0.07-0.21c-0.06-0.29-0.11-0.59-0.17-0.89c-0.26-1.35-0.51-2.71-0.77-4.06c-0.22-1.16-0.45-2.33-0.67-3.49c-0.28-1.46-0.55-2.92-0.83-4.38c-0.21-1.09-0.41-2.17-0.62-3.26c-0.14-0.72-0.26-1.44-0.43-2.16c-0.15-0.69-0.5-1.29-1.02-1.77c-0.76-0.7-1.67-1.02-2.69-1.02c-4.45-0.01-8.91,0-13.37,0c-0.09,0-0.17,0.01-0.26,0.02C0.2,0.67,0.18,0.79,0.15,0.91C0.11,1.11,0.05,1.3,0,1.49C0,1.51,0,1.53,0,1.54z M64.75,0c-0.08,0.01-0.15,0.03-0.23,0.04c-0.48,0.03-0.96,0.02-1.43,0.08c-1.43,0.15-2.83,0.45-4.18,0.95c-1.86,0.69-3.53,1.68-4.87,3.18c-1.79,2.02-2.52,4.39-2.29,7.06c0.14,1.65,0.88,3.02,2.01,4.2c0.61,0.63,1.29,1.16,2.01,1.65c1.1,0.74,2.28,1.36,3.45,1.99c0.83,0.45,1.68,0.89,2.41,1.5c0.32,0.26,0.63,0.55,0.88,0.88c0.52,0.69,0.58,1.45,0.19,2.22c-0.35,0.7-0.94,1.14-1.62,1.47c-0.96,0.46-1.99,0.63-3.04,0.65c-0.92,0.02-1.84-0.06-2.75-0.21c-1.81-0.3-3.54-0.86-5.18-1.71c-0.08-0.04-0.17-0.09-0.28-0.15c-0.49,2.31-0.98,4.59-1.47,6.89c0.36,0.13,0.7,0.27,1.05,0.39c1.2,0.41,2.43,0.72,3.68,0.94c1.28,0.23,2.57,0.37,3.88,0.4c0.06,0,0.12,0.03,0.17,0.04c0.28,0,0.57,0,0.85,0c0.05-0.01,0.1-0.03,0.15-0.04c0.57-0.04,1.15-0.07,1.72-0.12c1.81-0.17,3.56-0.59,5.23-1.33c1.51-0.67,2.85-1.57,3.95-2.81c1.05-1.17,1.75-2.52,2.12-4.05c0.21-0.89,0.28-1.8,0.27-2.71c-0.01-0.88-0.17-1.72-0.49-2.54c-0.5-1.3-1.34-2.34-2.38-3.24c-0.84-0.73-1.77-1.34-2.73-1.88c-1.07-0.6-2.15-1.17-3.22-1.76c-0.69-0.38-1.36-0.81-1.9-1.4c-0.7-0.77-0.79-1.66-0.13-2.5c0.34-0.44,0.79-0.73,1.29-0.96c0.92-0.42,1.9-0.55,2.9-0.56c0.62-0.01,1.24,0.03,1.85,0.11c1.53,0.19,3.01,0.58,4.42,1.2c0.14,0.06,0.29,0.12,0.45,0.18c0.48-2.23,0.96-4.43,1.43-6.64c-0.11-0.05-0.2-0.09-0.29-0.12c-0.76-0.28-1.55-0.51-2.34-0.69c-1.49-0.33-2.99-0.55-4.52-0.56c-0.08,0-0.15-0.03-0.23-0.04C65.28,0,65.02,0,64.75,0z M34.76,31.88c0.06,0.02,0.08,0.03,0.11,0.03c2.62,0,5.24,0,7.85,0c0.04,0,0.09-0.01,0.13-0.02c0.01,0,0.02-0.01,0.02-0.01c0.01-0.01,0.01-0.01,0.02-0.02c2.21-10.43,4.42-20.87,6.63-31.33c-2.71,0-5.39,0-8.11,0C39.2,10.98,36.98,21.43,34.76,31.88z" data-svg-origin="0 0" transform="matrix(1,0,0,1,215,482)" style="transform-origin: 0px 0px;"></path>
</g>
</g>
</svg>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script id="rendered-js">
gsap.timeline().
set('.logo', { x: 215, y: 482 }).
set('.chip', { x: 148, y: 66 }).
set('.knot', { x: 22, y: 250 }).
set('.numTxt', { x: 22, y: 375 }).
set('.nameTxt', { x: 22, y: 410 }).
add(centerMain(), 0.2).
from('.ball', { duration: 2,
transformOrigin: '50% 50%',
scale: 0,
opacity: 0,
ease: 'elastic',
stagger: 0.2 },
0).
fromTo('.card', { x: 200,
y: 40,
transformOrigin: '50% 50%',
rotation: -4,
skewX: 10,
skewY: 4,
scale: 2,
opacity: 0 },
{
duration: 1.3,
skewX: 0,
skewY: 0,
scale: 1,
opacity: 1,
ease: 'power4.inOut' },
0.2);
function centerMain() {gsap.set('.main', { x: '50%', xPercent: -50, y: '50%', yPercent: -50 });}
window.onresize = centerMain;
window.onmousemove = e => {
let winPercent = { x: e.clientX / window.innerWidth, y: e.clientY / window.innerHeight },
distFromCenter = 1 - Math.abs((e.clientX - window.innerWidth / 2) / window.innerWidth * 2);
gsap.timeline({ defaults: { duration: 0.5, overwrite: 'auto' } }).
to('.card', { rotation: -7 + 9 * winPercent.x }, 0).
to('.fillLight', { opacity: distFromCenter }, 0).
to('.bg', { x: 100 - 200 * winPercent.x, y: 20 - 40 * winPercent.y }, 0);
};
//# sourceURL=pen.js
</script>
</body>