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>Droplet Rotation Animation</title>
7<style>
8 html, body {
9 margin: 0;
10 width: 100%;
11 height: 100%;
12 overflow: hidden;
13 background: #fff;
14 font-family: sans-serif;
15 }
16
17 .scene {
18 position: relative;
19 width: 100vw;
20 height: 100vh;
21 background:
22 linear-gradient(to bottom, #84b9e6 0 33.2%, #ffffff 33.2% 100%);
23 }
24
25 .drop {
26 position: absolute;
27 left: 50%;
28 top: 12.5%;
29 width: 62px;
30 height: 62px;
31 transform: translateX(-50%);
32 }
33
34 .drop svg {
35 width: 100%;
36 height: 100%;
37 display: block;
38 overflow: visible;
39 }
40
41 .drop path {
42 fill: none;
43 stroke: #2f7fd1;
44 stroke-width: 4.5;
45 stroke-linejoin: round;
46 stroke-linecap: round;
47 transform-origin: 50% 50%;
48 animation: wobble 1.2s ease-in-out infinite;
49 }
50
51 @keyframes wobble {
52 0% { transform: rotate(0deg); }
53 25% { transform: rotate(32deg); }
54 50% { transform: rotate(58deg); }
55 75% { transform: rotate(28deg); }
56 100% { transform: rotate(0deg); }
57 }
58</style>
59</head>
60<body>
61 <div class="scene">
62 <div class="drop" aria-hidden="true">
63 <svg viewBox="0 0 64 64">
64 <!-- Rounded droplet / shield-like outline matching the frames -->
65 <path d="M32 8
66 L50 8
67 L50 28
68 C50 40 41 50 29 50
69 C17 50 8 41 8 29
70 C8 17 17 8 29 8
71 Z"/>
72 </svg>
73 </div>
74 </div>
75</body>
76</html>