1.jelly-triangle {
2  --uib-size: 2.8rem;
3  --uib-speed: 1.75s;
4  --uib-color: #183153;
5  position: relative;
6  height: var(--uib-size);
7  width: var(--uib-size);
8  filter: url('#uib-jelly-triangle-ooze');
9}
10
11.jelly-triangle__dot,
12.jelly-triangle::before,
13.jelly-triangle::after {
14  content: '';
15  position: absolute;
16  width: 33%;
17  height: 33%;
18  background: var(--uib-color);
19  border-radius: 100%;
20  box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
21}
22
23.jelly-triangle__dot {
24  top: 6%;
25  left: 30%;
26  animation: grow7132 var(--uib-speed) ease infinite;
27}
28
29.jelly-triangle::before {
30  bottom: 6%;
31  right: 0;
32  animation: grow7132 var(--uib-speed) ease calc(var(--uib-speed) * -0.666)
33    infinite;
34}
35
36.jelly-triangle::after {
37  bottom: 6%;
38  left: 0;
39  animation: grow7132 var(--uib-speed) ease calc(var(--uib-speed) * -0.333)
40    infinite;
41}
42
43.jelly-triangle__traveler {
44  position: absolute;
45  top: 6%;
46  left: 30%;
47  width: 33%;
48  height: 33%;
49  background: var(--uib-color);
50  border-radius: 100%;
51  animation: triangulate6214 var(--uib-speed) ease infinite;
52}
53
54.jelly-maker {
55  width: 0;
56  height: 0;
57  position: absolute;
58}
59
60@keyframes triangulate6214 {
61  0%,
62  100% {
63    transform: none;
64  }
65
66  33.333% {
67    transform: translate(120%, 175%);
68  }
69
70  66.666% {
71    transform: translate(-95%, 175%);
72  }
73}
74
75@keyframes grow7132 {
76  0%,
77  100% {
78    transform: scale(1.5);
79  }
80
81  20%,
82  70% {
83    transform: none;
84  }
85}