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>Dot Split Animation</title>
7 <style>
8 /* Define the color palette and basic layout */
9 :root {
10 --bg-color: #fdfbe8;
11 --dot-color: #a3435b;
12 --animation-duration: 2s;
13 }
14
15 body, html {
16 margin: 0;
17 padding: 0;
18 width: 100%;
19 height: 100%;
20 background-color: var(--bg-color);
21 display: flex;
22 justify-content: center;
23 align-items: center;
24 overflow: hidden;
25 }
26
27 /*
28 The "Gooey" effect is achieved using an SVG filter.
29 This wrapper applies the filter to its children.
30 */
31 .container {
32 position: relative;
33 width: 200px;
34 height: 200px;
35 display: flex;
36 justify-content: center;
37 align-items: center;
38 filter: url('#goo');
39 /* Fallback for browsers that don't support SVG filters well */
40 -webkit-filter: url('#goo');
41 }
42
43 .dot {
44 position: absolute;
45 width: 44px;
46 height: 44px;
47 background-color: var(--dot-color);
48 border-radius: 50%;
49 transform-origin: center;
50 }
51
52 /*
53 Left dot animation:
54 - 0s: Merged at center, slightly scaled up
55 - 0.5s (25%): Furthest left, original size
56 - 1.0s (50%): Back at center
57 - 1.0s to 2.0s: Hold at center
58 */
59 .dot-left {
60 animation: split-left var(--animation-duration) ease-in-out infinite;
61 }
62
63 /* Right dot animation: mirrored movement */
64 .dot-right {
65 animation: split-right var(--animation-duration) ease-in-out infinite;
66 }
67
68 @keyframes split-left {
69 0%, 50%, 100% {
70 transform: translateX(0) scale(1.4);
71 }
72 25% {
73 transform: translateX(-42px) scale(1);
74 }
75 }
76
77 @keyframes split-right {
78 0%, 50%, 100% {
79 transform: translateX(0) scale(1.4);
80 }
81 25% {
82 transform: translateX(42px) scale(1);
83 }
84 }
85
86 /* Hide the SVG utility element */
87 svg {
88 position: absolute;
89 width: 0;
90 height: 0;
91 }
92 </style>
93</head>
94<body>
95
96 <div class="container">
97 <div class="dot dot-left"></div>
98 <div class="dot dot-right"></div>
99 </div>
100
101 <!--
102 SVG Filter Definition:
103 1. feGaussianBlur: Blurs the elements to create overlapping alpha channels.
104 2. feColorMatrix: Increases the alpha threshold (contrast) to turn the
105 blurred edges back into a sharp, "gooey" liquid-like connection.
106 -->
107 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
108 <defs>
109 <filter id="goo">
110 <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
111 <feColorMatrix in="blur" mode="matrix"
112 values="1 0 0 0 0
113 0 1 0 0 0
114 0 0 1 0 0
115 0 0 0 19 -9" result="goo" />
116 <feComposite in="SourceGraphic" in2="goo" operator="atop" />
117 </filter>
118 </defs>
119 </svg>
120
121</body>
122</html>