1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8" />
5<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6<title>Protecting Our Clean Water Animation</title>
7<style>
8 :root{
9 --bg:#232d8f;
10 --card:#f2f2fb;
11 --ring:rgba(255,255,255,.72);
12 --ring2:rgba(255,255,255,.28);
13 --title:#3f7398;
14 --text:#3f3f46;
15 --shadow:rgba(255,255,255,.18);
16 }
17
18 *{box-sizing:border-box}
19 html,body{
20 margin:0;
21 width:100%;
22 height:100%;
23 overflow:hidden;
24 background:var(--bg);
25 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
26 }
27
28 .scene{
29 position:relative;
30 width:100vw;
31 height:100vh;
32 background:var(--bg);
33 }
34
35 .center{
36 position:absolute;
37 left:50%;
38 top:50%;
39 transform:translate(-50%,-50%);
40 width:min(62vw, 560px);
41 aspect-ratio:1/1;
42 }
43
44 .orbital{
45 position:absolute;
46 inset:0;
47 }
48
49 .ring{
50 position:absolute;
51 left:50%;
52 top:61%;
53 transform:translate(-50%,-50%) scale(0);
54 border-radius:50%;
55 border:4px solid var(--ring);
56 width:52%;
57 height:12%;
58 opacity:0;
59 animation:ringMain 6.2s cubic-bezier(.22,.61,.36,1) forwards;
60 }
61
62 .ring.r2{
63 border-width:2px;
64 border-color:var(--ring2);
65 width:66%;
66 height:15%;
67 animation:ringOuter 6.2s cubic-bezier(.22,.61,.36,1) forwards;
68 }
69
70 .shapeWrap{
71 position:absolute;
72 left:50%;
73 top:50%;
74 width:42%;
75 height:58%;
76 transform:translate(-50%,-50%);
77 animation:moveShape 6.2s cubic-bezier(.22,.61,.36,1) forwards;
78 }
79
80 .shape{
81 position:absolute;
82 inset:0;
83 background:var(--card);
84 box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
85 animation:morph 6.2s cubic-bezier(.22,.61,.36,1) forwards;
86 clip-path:path("M 50 0 C 47 0 44 4 40 8 L 14 35 C 5 44 0 56 0 70 C 0 92 18 110 50 110 C 82 110 100 92 100 70 C 100 56 95 44 86 35 L 60 8 C 56 4 53 0 50 0 Z");
87 }
88
89 .shape::after{
90 content:"";
91 position:absolute;
92 left:50%;
93 top:73%;
94 width:92%;
95 height:18%;
96 transform:translate(-50%,-50%);
97 border-radius:50%;
98 border:2px solid rgba(255,255,255,.28);
99 opacity:0;
100 animation:innerArc 6.2s ease-out forwards;
101 }
102
103 .cardText{
104 position:absolute;
105 inset:0;
106 display:flex;
107 flex-direction:column;
108 align-items:center;
109 justify-content:center;
110 text-align:center;
111 padding:10% 8%;
112 opacity:0;
113 animation:textIn 6.2s ease forwards;
114 }
115
116 .title{
117 margin:0 0 .45em;
118 color:var(--title);
119 font-weight:700;
120 font-size:clamp(18px, 4.2vw, 38px);
121 line-height:1.05;
122 letter-spacing:.01em;
123 }
124
125 .subtitle{
126 margin:0;
127 color:var(--text);
128 font-size:clamp(9px, 1.45vw, 18px);
129 line-height:1.15;
130 max-width:90%;
131 }
132
133 @keyframes ringMain{
134 0%,34%{opacity:0; transform:translate(-50%,-50%) scale(.2)}
135 42%{opacity:.95; transform:translate(-50%,-50%) scale(.55)}
136 52%{opacity:.95; transform:translate(-50%,-50%) scale(1)}
137 66%{opacity:.85; transform:translate(-50%,-50%) scale(1.18)}
138 78%{opacity:.35; transform:translate(-50%,-50%) scale(1.28)}
139 100%{opacity:0; transform:translate(-50%,-50%) scale(1.28)}
140 }
141
142 @keyframes ringOuter{
143 0%,38%{opacity:0; transform:translate(-50%,-50%) scale(.2)}
144 48%{opacity:0; transform:translate(-50%,-50%) scale(.7)}
145 58%{opacity:.7; transform:translate(-50%,-50%) scale(1)}
146 72%{opacity:.45; transform:translate(-50%,-50%) scale(1.18)}
147 100%{opacity:0; transform:translate(-50%,-50%) scale(1.22)}
148 }
149
150 @keyframes innerArc{
151 0%,40%{opacity:0}
152 48%{opacity:.18}
153 58%{opacity:.28}
154 70%{opacity:.18}
155 100%{opacity:0}
156 }
157
158 @keyframes moveShape{
159 0% {transform:translate(-50%,-50%) rotate(0deg) scale(1)}
160 34% {transform:translate(-50%,-50%) rotate(0deg) scale(1)}
161 48% {transform:translate(-50%,-47%) rotate(0deg) scale(1.02)}
162 58% {transform:translate(-50%,-44%) rotate(-8deg) scale(1.02)}
163 66% {transform:translate(-50%,-42%) rotate(2deg) scale(1.01)}
164 74% {transform:translate(-50%,-40%) rotate(0deg) scale(1)}
165 100% {transform:translate(-50%,-40%) rotate(0deg) scale(1)}
166 }
167
168 @keyframes morph{
169 0%{
170 clip-path:path("M 50 0 C 47 0 44 4 40 8 L 14 35 C 5 44 0 56 0 70 C 0 92 18 110 50 110 C 82 110 100 92 100 70 C 100 56 95 44 86 35 L 60 8 C 56 4 53 0 50 0 Z");
171 border-radius:0;
172 }
173 34%{
174 clip-path:path("M 50 0 C 47 0 44 4 40 8 L 14 35 C 5 44 0 56 0 70 C 0 92 18 110 50 110 C 82 110 100 92 100 70 C 100 56 95 44 86 35 L 60 8 C 56 4 53 0 50 0 Z");
175 border-radius:0;
176 }
177 48%{
178 clip-path:path("M 50 0 C 47 0 44 4 40 8 L 14 35 C 5 44 0 56 0 70 C 0 92 18 110 50 110 C 82 110 100 92 100 70 C 100 56 95 44 86 35 L 60 8 C 56 4 53 0 50 0 Z");
179 border-radius:0;
180 }
181 58%{
182 clip-path:inset(0 round 14%);
183 border-radius:14%;
184 }
185 70%{
186 clip-path:inset(0 round 12%);
187 border-radius:12%;
188 }
189 82%{
190 clip-path:inset(0 round 9%);
191 border-radius:9%;
192 }
193 100%{
194 clip-path:inset(0 round 9%);
195 border-radius:9%;
196 }
197 }
198
199 @keyframes textIn{
200 0%,78%{opacity:0; transform:scale(.98)}
201 88%{opacity:.45; transform:scale(1)}
202 100%{opacity:1; transform:scale(1)}
203 }
204
205 @media (max-aspect-ratio: 1/1){
206 .center{width:min(72vw, 560px)}
207 }
208</style>
209</head>
210<body>
211 <div class="scene">
212 <div class="center">
213 <div class="orbital">
214 <div class="ring r2"></div>
215 <div class="ring"></div>
216 </div>
217
218 <div class="shapeWrap">
219 <div class="shape">
220 <div class="cardText">
221 <h1 class="title">Protecting Our<br>Clean Water</h1>
222 <p class="subtitle">Addressing phosphorus, the greatest threat to clean water in Lake Champlain</p>
223 </div>
224 </div>
225 </div>
226 </div>
227 </div>
228</body>
229</html>