1.jelly-triangle {
2 --uib-size: 42px;
3 --uib-speed: 1.25s;
4 --uib-color: #512727;
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}
21
22.jelly-triangle__dot {
23 top: 6%;
24 left: 30%;
25 animation: grow0 var(--uib-speed) ease infinite;
26}
27
28.jelly-triangle::before {
29 bottom: 6%;
30 right: 0;
31 animation: grow0 var(--uib-speed) ease calc(var(--uib-speed) * -0.666)
32    infinite;
33}
34
35.jelly-triangle::after {
36 bottom: 6%;
37 left: 0;
38 animation: grow0 var(--uib-speed) ease calc(var(--uib-speed) * -0.333)
39    infinite;
40}
41
42.jelly-triangle__traveler {
43 position: absolute;
44 top: 6%;
45 left: 30%;
46 width: 33%;
47 height: 33%;
48 background: var(--uib-color);
49 border-radius: 100%;
50 animation: triangulate var(--uib-speed) ease infinite;
51}
52
53.jelly-maker {
54 width: 0;
55 height: 0;
56 position: absolute;
57}
58
59@keyframes triangulate {
60 0%,
61  100% {
62  transform: none;
63 }
64
65 33.333% {
66  transform: translate(120%, 175%);
67 }
68
69 66.666% {
70  transform: translate(-95%, 175%);
71 }
72}
73
74@keyframes grow0 {
75 0%,
76  100% {
77  transform: scale(1.5);
78 }
79
80 20%,
81  70% {
82  transform: none;
83 }
84}