console
<div class="text">
</div>
<svg>
<filter id="gooey">
<feGaussianBlur in="SourceGraphic" stdDeviation="9" result="blur">
</feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 28 -8"
result="gooey">
</feColorMatrix>
<feComposite in="SourceGraphic" in2="gooey" operator="atop">
</feComposite>
</filter>
</svg>
body {
background: #44baa8;
}
.text {
position: absolute;
left: 50%;
top: 50%;
color: yellow;
font-size: 300px;
filter: url(#gooey);
}
.text::before,
.text::after {
position: absolute;
opacity: 0;
transform: translate(-50%, -50%);
animation-duration: 84s;
animation-timing-function: ease;
animation-iteration-count: infinite;
filter: blur(9px);
}
.text::before {
content: "58";
animation-name: items-odd;
}
.text::after {
content: "59";
animation-name: items-even;
animation-delay: 1.5s;
}
@keyframes items-odd {
1.1904761905% {
opacity: 1;
}
1.7857142857% {
opacity: 1;
}
2.9761904762% {
opacity: 0;
}
3.5714285714% {
opacity: 0;
}
4.7619047619% {
opacity: 1;
}
5.3571428571% {
opacity: 1;
}
6.5476190476% {
opacity: 0;
}
7.1428571429% {
opacity: 0;
}
8.3333333333% {
opacity: 1;
}
8.9285714286% {
opacity: 1;
}
10.119047619% {
opacity: 0;
}
10.7142857143% {
opacity: 0;
}
11.9047619048% {
opacity: 1;
}
12.5% {
opacity: 1;
}
13.6904761905% {
opacity: 0;
}
14.2857142857% {
opacity: 0;
}
15.4761904762% {
opacity: 1;
}
16.0714285714% {
opacity: 1;
}
17.2619047619% {
opacity: 0;
}
17.8571428571% {
opacity: 0;
}
19.0476190476% {
opacity: 1;
}
19.6428571429% {
opacity: 1;
}
20.8333333333% {
opacity: 0;
}
21.4285714286% {
opacity: 0;
}
22.619047619% {
opacity: 1;
}
23.2142857143% {
opacity: 1;
}
24.4047619048% {
opacity: 0;
}
25% {
opacity: 0;
}
26.1904761905% {
opacity: 1;
}
26.7857142857% {
opacity: 1;
}
27.9761904762% {
opacity: 0;
}
28.5714285714% {
opacity: 0;
}
29.7619047619% {
opacity: 1;
}
30.3571428571% {
opacity: 1;
}
31.5476190476% {
opacity: 0;
}
32.1428571429% {
opacity: 0;
}
33.3333333333% {
opacity: 1;
}
33.9285714286% {
opacity: 1;
}
35.119047619% {
opacity: 0;
}
35.7142857143% {
opacity: 0;
}
36.9047619048% {
opacity: 1;
}
37.5% {
opacity: 1;
}
38.6904761905% {
opacity: 0;
}
39.2857142857% {
opacity: 0;
}
40.4761904762% {
opacity: 1;
}
41.0714285714% {
opacity: 1;
}
42.2619047619% {
opacity: 0;
}
42.8571428571% {
opacity: 0;
}
44.0476190476% {
opacity: 1;
}
44.6428571429% {
opacity: 1;
}
45.8333333333% {
opacity: 0;
}
46.4285714286% {
opacity: 0;
}
47.619047619% {
opacity: 1;
}
48.2142857143% {
opacity: 1;
}
49.4047619048% {
opacity: 0;
}
50% {
opacity: 0;
}
51.1904761905% {
opacity: 1;
}
51.7857142857% {
opacity: 1;
}
52.9761904762% {
opacity: 0;
}
53.5714285714% {
opacity: 0;
}
54.7619047619% {
opacity: 1;
}
55.3571428571% {
opacity: 1;
}
56.5476190476% {
opacity: 0;
}
57.1428571429% {
opacity: 0;
}
58.3333333333% {
opacity: 1;
}
58.9285714286% {
opacity: 1;
}
60.119047619% {
opacity: 0;
}
60.7142857143% {
opacity: 0;
}
61.9047619048% {
opacity: 1;
}
62.5% {
opacity: 1;
}
63.6904761905% {
opacity: 0;
}
64.2857142857% {
opacity: 0;
}
65.4761904762% {
opacity: 1;
}
66.0714285714% {
opacity: 1;
}
67.2619047619% {
opacity: 0;
}
67.8571428571% {
opacity: 0;
}
69.0476190476% {
opacity: 1;
}
69.6428571429% {
opacity: 1;
}
70.8333333333% {
opacity: 0;
}
71.4285714286% {
opacity: 0;
}
72.619047619% {
opacity: 1;
}
73.2142857143% {
opacity: 1;
}
74.4047619048% {
opacity: 0;
}
75% {
opacity: 0;
}
76.1904761905% {
opacity: 1;
}
76.7857142857% {
opacity: 1;
}
77.9761904762% {
opacity: 0;
}
78.5714285714% {
opacity: 0;
}
79.7619047619% {
opacity: 1;
}
80.3571428571% {
opacity: 1;
}
81.5476190476% {
opacity: 0;
}
82.1428571429% {
opacity: 0;
}
83.3333333333% {
opacity: 1;
}
83.9285714286% {
opacity: 1;
}
85.119047619% {
opacity: 0;
}
85.7142857143% {
opacity: 0;
}
86.9047619048% {
opacity: 1;
}
87.5% {
opacity: 1;
}
88.6904761905% {
opacity: 0;
}
89.2857142857% {
opacity: 0;
}
90.4761904762% {
opacity: 1;
}
91.0714285714% {
opacity: 1;
}
92.2619047619% {
opacity: 0;
}
92.8571428571% {
opacity: 0;
}
94.0476190476% {
opacity: 1;
}
94.6428571429% {
opacity: 1;
}
95.8333333333% {
opacity: 0;
}
96.4285714286% {
opacity: 0;
}
97.619047619% {
opacity: 1;
}
98.2142857143% {
opacity: 1;
}
99.4047619048% {
opacity: 0;
}
100% {
opacity: 0;
}
0% {
content: "1";
}
3.5713285714% {
content: "1";
}
3.5714285714% {
content: "3";
}
7.1427571429% {
content: "3";
}
7.1428571429% {
content: "5";
}
10.7141857143% {
content: "5";
}
10.7142857143% {
content: "10";
}
14.2856142857% {
content: "10";
}
14.2857142857% {
content: "12";
}
17.8570428571% {
content: "12";
}
17.8571428571% {
content: "14";
}
21.4284714286% {
content: "14";
}
21.4285714286% {
content: "16";
}
24.9999% {
content: "16";
}
25% {
content: "18";
}
28.5713285714% {
content: "18";
}
28.5714285714% {
content: "20";
}
32.1427571429% {
content: "20";
}
32.1428571429% {
content: "22";
}
35.7141857143% {
content: "22";
}
35.7142857143% {
content: "24";
}
39.2856142857% {
content: "24";
}
39.2857142857% {
content: "26";
}
42.8570428571% {
content: "26";
}
42.8571428571% {
content: "28";
}
46.4284714286% {
content: "28";
}
46.4285714286% {
content: "30";
}
49.9999% {
content: "30";
}
50% {
content: "32";
}
53.5713285714% {
content: "32";
}
53.5714285714% {
content: "34";
}
57.1427571429% {
content: "34";
}
57.1428571429% {
content: "36";
}
60.7141857143% {
content: "36";
}
60.7142857143% {
content: "38";
}
64.2856142857% {
content: "38";
}
64.2857142857% {
content: "40";
}
67.8570428571% {
content: "40";
}
67.8571428571% {
content: "42";
}
71.4284714286% {
content: "42";
}
71.4285714286% {
content: "44";
}
74.9999% {
content: "44";
}
75% {
content: "46";
}
78.5713285714% {
content: "46";
}
78.5714285714% {
content: "48";
}
82.1427571429% {
content: "48";
}
82.1428571429% {
content: "50";
}
85.7141857143% {
content: "50";
}
85.7142857143% {
content: "52";
}
89.2856142857% {
content: "52";
}
89.2857142857% {
content: "54";
}
92.8570428571% {
content: "54";
}
92.8571428571% {
content: "56";
}
96.4284714286% {
content: "56";
}
96.4285714286% {
content: "58";
}
99.9999% {
content: "58";
}
}
@keyframes items-even {
1.1904761905% {
opacity: 1;
}
1.7857142857% {
opacity: 1;
}
2.9761904762% {
opacity: 0;
}
3.5714285714% {
opacity: 0;
}
4.7619047619% {
opacity: 1;
}
5.3571428571% {
opacity: 1;
}
6.5476190476% {
opacity: 0;
}
7.1428571429% {
opacity: 0;
}
8.3333333333% {
opacity: 1;
}
8.9285714286% {
opacity: 1;
}
10.119047619% {
opacity: 0;
}
10.7142857143% {
opacity: 0;
}
11.9047619048% {
opacity: 1;
}
12.5% {
opacity: 1;
}
13.6904761905% {
opacity: 0;
}
14.2857142857% {
opacity: 0;
}
15.4761904762% {
opacity: 1;
}
16.0714285714% {
opacity: 1;
}
17.2619047619% {
opacity: 0;
}
17.8571428571% {
opacity: 0;
}
19.0476190476% {
opacity: 1;
}
19.6428571429% {
opacity: 1;
}
20.8333333333% {
opacity: 0;
}
21.4285714286% {
opacity: 0;
}
22.619047619% {
opacity: 1;
}
23.2142857143% {
opacity: 1;
}
24.4047619048% {
opacity: 0;
}
25% {
opacity: 0;
}
26.1904761905% {
opacity: 1;
}
26.7857142857% {
opacity: 1;
}
27.9761904762% {
opacity: 0;
}
28.5714285714% {
opacity: 0;
}
29.7619047619% {
opacity: 1;
}
30.3571428571% {
opacity: 1;
}
31.5476190476% {
opacity: 0;
}
32.1428571429% {
opacity: 0;
}
33.3333333333% {
opacity: 1;
}
33.9285714286% {
opacity: 1;
}
35.119047619% {
opacity: 0;
}
35.7142857143% {
opacity: 0;
}
36.9047619048% {
opacity: 1;
}
37.5% {
opacity: 1;
}
38.6904761905% {
opacity: 0;
}
39.2857142857% {
opacity: 0;
}
40.4761904762% {
opacity: 1;
}
41.0714285714% {
opacity: 1;
}
42.2619047619% {
opacity: 0;
}
42.8571428571% {
opacity: 0;
}
44.0476190476% {
opacity: 1;
}
44.6428571429% {
opacity: 1;
}
45.8333333333% {
opacity: 0;
}
46.4285714286% {
opacity: 0;
}
47.619047619% {
opacity: 1;
}
48.2142857143% {
opacity: 1;
}
49.4047619048% {
opacity: 0;
}
50% {
opacity: 0;
}
51.1904761905% {
opacity: 1;
}
51.7857142857% {
opacity: 1;
}
52.9761904762% {
opacity: 0;
}
53.5714285714% {
opacity: 0;
}
54.7619047619% {
opacity: 1;
}
55.3571428571% {
opacity: 1;
}
56.5476190476% {
opacity: 0;
}
57.1428571429% {
opacity: 0;
}
58.3333333333% {
opacity: 1;
}
58.9285714286% {
opacity: 1;
}
60.119047619% {
opacity: 0;
}
60.7142857143% {
opacity: 0;
}
61.9047619048% {
opacity: 1;
}
62.5% {
opacity: 1;
}
63.6904761905% {
opacity: 0;
}
64.2857142857% {
opacity: 0;
}
65.4761904762% {
opacity: 1;
}
66.0714285714% {
opacity: 1;
}
67.2619047619% {
opacity: 0;
}
67.8571428571% {
opacity: 0;
}
69.0476190476% {
opacity: 1;
}
69.6428571429% {
opacity: 1;
}
70.8333333333% {
opacity: 0;
}
71.4285714286% {
opacity: 0;
}
72.619047619% {
opacity: 1;
}
73.2142857143% {
opacity: 1;
}
74.4047619048% {
opacity: 0;
}
75% {
opacity: 0;
}
76.1904761905% {
opacity: 1;
}
76.7857142857% {
opacity: 1;
}
77.9761904762% {
opacity: 0;
}
78.5714285714% {
opacity: 0;
}
79.7619047619% {
opacity: 1;
}
80.3571428571% {
opacity: 1;
}
81.5476190476% {
opacity: 0;
}
82.1428571429% {
opacity: 0;
}
83.3333333333% {
opacity: 1;
}
83.9285714286% {
opacity: 1;
}
85.119047619% {
opacity: 0;
}
85.7142857143% {
opacity: 0;
}
86.9047619048% {
opacity: 1;
}
87.5% {
opacity: 1;
}
88.6904761905% {
opacity: 0;
}
89.2857142857% {
opacity: 0;
}
90.4761904762% {
opacity: 1;
}
91.0714285714% {
opacity: 1;
}
92.2619047619% {
opacity: 0;
}
92.8571428571% {
opacity: 0;
}
94.0476190476% {
opacity: 1;
}
94.6428571429% {
opacity: 1;
}
95.8333333333% {
opacity: 0;
}
96.4285714286% {
opacity: 0;
}
97.619047619% {
opacity: 1;
}
98.2142857143% {
opacity: 1;
}
99.4047619048% {
opacity: 0;
}
100% {
opacity: 0;
}
0% {
content: "2";
}
3.5713285714% {
content: "2";
}
3.5714285714% {
content: "4";
}
7.1427571429% {
content: "4";
}
7.1428571429% {
content: "9";
}
10.7141857143% {
content: "9";
}
10.7142857143% {
content: "11";
}
14.2856142857% {
content: "11";
}
14.2857142857% {
content: "13";
}
17.8570428571% {
content: "13";
}
17.8571428571% {
content: "15";
}
21.4284714286% {
content: "15";
}
21.4285714286% {
content: "17";
}
24.9999% {
content: "17";
}
25% {
content: "19";
}
28.5713285714% {
content: "19";
}
28.5714285714% {
content: "21";
}
32.1427571429% {
content: "21";
}
32.1428571429% {
content: "23";
}
35.7141857143% {
content: "23";
}
35.7142857143% {
content: "25";
}
39.2856142857% {
content: "25";
}
39.2857142857% {
content: "27";
}
42.8570428571% {
content: "27";
}
42.8571428571% {
content: "29";
}
46.4284714286% {
content: "29";
}
46.4285714286% {
content: "31";
}
49.9999% {
content: "31";
}
50% {
content: "33";
}
53.5713285714% {
content: "33";
}
53.5714285714% {
content: "35";
}
57.1427571429% {
content: "35";
}
57.1428571429% {
content: "37";
}
60.7141857143% {
content: "37";
}
60.7142857143% {
content: "39";
}
64.2856142857% {
content: "39";
}
64.2857142857% {
content: "41";
}
67.8570428571% {
content: "41";
}
67.8571428571% {
content: "43";
}
71.4284714286% {
content: "43";
}
71.4285714286% {
content: "45";
}
74.9999% {
content: "45";
}
75% {
content: "47";
}
78.5713285714% {
content: "47";
}
78.5714285714% {
content: "49";
}
82.1427571429% {
content: "49";
}
82.1428571429% {
content: "51";
}
85.7141857143% {
content: "51";
}
85.7142857143% {
content: "53";
}
89.2856142857% {
content: "53";
}
89.2857142857% {
content: "55";
}
92.8570428571% {
content: "55";
}
92.8571428571% {
content: "57";
}
96.4284714286% {
content: "57";
}
96.4285714286% {
content: "59";
}
99.9999% {
content: "59";
}
}