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>Blob Pulse</title>
7<style>
8 html, body {
9 margin: 0;
10 width: 100%;
11 height: 100%;
12 background: #000;
13 overflow: hidden;
14 }
15
16 .stage {
17 position: relative;
18 width: 100vw;
19 height: 100vh;
20 background: #000;
21 }
22
23 .blob {
24 position: absolute;
25 left: 50%;
26 top: 50%;
27 width: 110px;
28 height: 122px;
29 transform: translate(-50%, -50%);
30 background: #fff;
31 border-radius: 48% 48% 44% 44% / 42% 42% 58% 58%;
32 animation: wobble 1.35s ease-in-out infinite;
33 filter: none;
34 }
35
36 @keyframes wobble {
37 0% {
38 border-radius: 48% 48% 44% 44% / 42% 42% 58% 58%;
39 transform: translate(-50%, -50%) scale(1, 1);
40 }
41 12% {
42 border-radius: 49% 47% 45% 43% / 41% 43% 59% 57%;
43 transform: translate(-50%, -50%) scale(1.005, 0.995);
44 }
45 25% {
46 border-radius: 50% 46% 46% 42% / 40% 44% 60% 56%;
47 transform: translate(-50%, -50%) scale(1.01, 0.99);
48 }
49 38% {
50 border-radius: 49% 47% 45% 43% / 41% 43% 59% 57%;
51 transform: translate(-50%, -50%) scale(1.006, 0.994);
52 }
53 50% {
54 border-radius: 48% 48% 44% 44% / 42% 42% 58% 58%;
55 transform: translate(-50%, -50%) scale(1, 1);
56 }
57 62% {
58 border-radius: 47% 49% 43% 45% / 43% 41% 57% 59%;
59 transform: translate(-50%, -50%) scale(0.996, 1.004);
60 }
61 75% {
62 border-radius: 46% 50% 42% 46% / 44% 40% 56% 60%;
63 transform: translate(-50%, -50%) scale(0.992, 1.008);
64 }
65 88% {
66 border-radius: 47% 49% 43% 45% / 43% 41% 57% 59%;
67 transform: translate(-50%, -50%) scale(0.996, 1.004);
68 }
69 100% {
70 border-radius: 48% 48% 44% 44% / 42% 42% 58% 58%;
71 transform: translate(-50%, -50%) scale(1, 1);
72 }
73 }
74
75 /* Keep size proportional on smaller screens */
76 @media (max-width: 700px) {
77 .blob {
78 width: 11vw;
79 height: 12.2vw;
80 min-width: 72px;
81 min-height: 80px;
82 max-width: 110px;
83 max-height: 122px;
84 }
85 }
86</style>
87</head>
88<body>
89 <div class="stage">
90 <div class="blob"></div>
91 </div>
92</body>
93</html>