Notification by JkHuger

This notification was created for level-up-challenge

Made by

@JkHuger

Theme:

Dark

#notification

#212121

112 views

CSSAdd prefixes

1.level-up-notification {
2  justify-content: center;
3  align-items: center;
4  flex-direction: column;
5  background-color: #FDD835;
6  border-radius: 10px;
7  font-weight: bold;
8  font-family: "Courier New", monospace;
9  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
10  opacity: 0;
11  animation: scale-up 1.5s ease-in-out forwards, fade-out 0.5s ease-in-out forwards 21.5s;
12}
13
14.level-up-text {
15  text-align: center;
16  color: #fff;
17  font-size: 30px;
18  padding: 12px 20px;
19  font-weight: bold;
20  text-shadow: 2px 2px #000;
21}
22
23@keyframes confetti {
24  0% {
25    transform: translateY(-50%);
26  }
27
28  100% {
29    transform: translateY(100%);
30  }
31}
32
33@keyframes scale-up {
34  0% {
35    transform: scale(0);
36    opacity: 0;
37  }
38
39  100% {
40    transform: scale(1);
41    opacity: 1;
42  }
43}
44
45.level-up-notification:hover {
46  animation: none;
47}
48
49.level-up-notification:hover .confetti {
50  animation: confetti 0.5s ease-in-out forwards;
51}
52
53/* asd */
54
55.confetti-container {
56  user-select: none;
57  z-index: 10;
58}
59
60.confetti {
61  position: absolute;
62  left: 0;
63  right: 0;
64  display: flex;
65  /* width: 600px; */
66  /* height: 600px; */
67  /* overflow: hidden; */
68}
69
70.confetti .square {
71  width: 1rem;
72  height: 1rem;
73  background-color: var(--bg);
74  transform: rotate(-140deg);
75}
76
77.confetti .rectangle {
78  width: 1rem;
79  height: 0.5rem;
80  background-color: var(--bg);
81}
82
83.confetti .hexagram {
84  width: 0;
85  height: 0;
86  border-left: 0.5rem solid transparent;
87  border-right: 0.5rem solid transparent;
88  border-bottom: 1rem solid var(--bg);
89  position: relative;
90}
91
92.confetti .hexagram:after {
93  content: "";
94  width: 0;
95  height: 0;
96  border-left: 0.5rem solid transparent;
97  border-right: 0.5rem solid transparent;
98  border-top: 1rem solid var(--bg);
99  position: absolute;
100  top: 0.33rem;
101  left: -0.5rem;
102}
103
104.confetti .pentagram {
105  width: 0rem;
106  height: 0rem;
107  display: block;
108  margin: 0.5rem 0;
109  border-right: 1rem solid transparent;
110  border-bottom: 0.7rem solid var(--bg);
111  border-left: 1rem solid transparent;
112  transform: rotate(35deg);
113  position: relative;
114}
115
116.confetti .pentagram:before {
117  content: "";
118  width: 0;
119  height: 0;
120  display: block;
121  border-bottom: 0.8rem solid var(--bg);
122  border-left: 0.3rem solid transparent;
123  border-right: 0.3rem solid transparent;
124  transform: rotate(-35deg);
125  position: absolute;
126  top: -0.45rem;
127  left: -0.65rem;
128}
129
130.confetti .pentagram:after {
131  content: "";
132  width: 0rem;
133  height: 0rem;
134  display: block;
135  border-right: 1rem solid transparent;
136  border-bottom: 0.7rem solid var(--bg);
137  border-left: 1rem solid transparent;
138  transform: rotate(-70deg);
139  position: absolute;
140  top: 0.03rem;
141  left: -1.05rem;
142}
143
144.confetti .dodecagram {
145  background: var(--bg);
146  width: 0.8rem;
147  height: 0.8rem;
148  position: relative;
149}
150
151.confetti .dodecagram:before {
152  content: "";
153  height: 0.8rem;
154  width: 0.8rem;
155  background: var(--bg);
156  transform: rotate(30deg);
157  position: absolute;
158  top: 0;
159  left: 0;
160}
161
162.confetti .dodecagram:after {
163  content: "";
164  height: 0.8rem;
165  width: 0.8rem;
166  background: var(--bg);
167  transform: rotate(60deg);
168  position: absolute;
169  top: 0;
170  left: 0;
171}
172
173.confetti .wavy-line {
174  position: relative;
175}
176
177.confetti .wavy-line::after,
178.confetti .wavy-line::before {
179  content: "";
180  height: 1rem;
181  width: 8rem;
182  background-size: 2rem 1rem;
183  position: absolute;
184  left: -9rem;
185  transform: rotate(90deg);
186}
187
188.confetti .wavy-line::before {
189  background-image: linear-gradient(
190    45deg,
191    transparent,
192    transparent 50%,
193    var(--bg) 50%,
194    transparent 60%
195  );
196  top: 1rem;
197}
198
199.confetti .wavy-line::after {
200  background-image: linear-gradient(
201    -45deg,
202    transparent,
203    transparent 50%,
204    var(--bg) 50%,
205    transparent 60%
206  );
207}
208
209.confetti i {
210  width: 3rem;
211  height: 3rem;
212  margin: 0 0.2rem;
213  animation-name: confetti;
214  animation-timing-function: linear;
215  animation-iteration-count: infinite;
216  animation-duration: calc(70s / var(--speed));
217}
218
219.confetti i:nth-child(even) {
220  transform: rotate(90deg);
221}
222
223@keyframes confetti {
224  0% {
225    transform: translateY(-500px);
226  }
227
228  100% {
229    transform: translateY(500px);
230  }
231}
232

.level-up-notification {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #FDD835;
  border-radius: 10px;
  font-weight: bold;
  font-family: "Courier New", monospace;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: scale-up 1.5s ease-in-out forwards, fade-out 0.5s ease-in-out forwards 21.5s;
}

.level-up-text {
  text-align: center;
  color: #fff;
  font-size: 30px;
  padding: 12px 20px;
  font-weight: bold;
  text-shadow: 2px 2px #000;
}

@keyframes confetti {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(100%);
  }
}

@keyframes scale-up {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.level-up-notification:hover {
  animation: none;
}

.level-up-notification:hover .confetti {
  animation: confetti 0.5s ease-in-out forwards;
}

/* asd */

.confetti-container {
  user-select: none;
  z-index: 10;
}

.confetti {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  /* width: 600px; */
  /* height: 600px; */
  /* overflow: hidden; */
}

.confetti .square {
  width: 1rem;
  height: 1rem;
  background-color: var(--bg);
  transform: rotate(-140deg);
}

.confetti .rectangle {
  width: 1rem;
  height: 0.5rem;
  background-color: var(--bg);
}

.confetti .hexagram {
  width: 0;
  height: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-bottom: 1rem solid var(--bg);
  position: relative;
}

.confetti .hexagram:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 1rem solid var(--bg);
  position: absolute;
  top: 0.33rem;
  left: -0.5rem;
}

.confetti .pentagram {
  width: 0rem;
  height: 0rem;
  display: block;
  margin: 0.5rem 0;
  border-right: 1rem solid transparent;
  border-bottom: 0.7rem solid var(--bg);
  border-left: 1rem solid transparent;
  transform: rotate(35deg);
  position: relative;
}

.confetti .pentagram:before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-bottom: 0.8rem solid var(--bg);
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  transform: rotate(-35deg);
  position: absolute;
  top: -0.45rem;
  left: -0.65rem;
}

.confetti .pentagram:after {
  content: "";
  width: 0rem;
  height: 0rem;
  display: block;
  border-right: 1rem solid transparent;
  border-bottom: 0.7rem solid var(--bg);
  border-left: 1rem solid transparent;
  transform: rotate(-70deg);
  position: absolute;
  top: 0.03rem;
  left: -1.05rem;
}

.confetti .dodecagram {
  background: var(--bg);
  width: 0.8rem;
  height: 0.8rem;
  position: relative;
}

.confetti .dodecagram:before {
  content: "";
  height: 0.8rem;
  width: 0.8rem;
  background: var(--bg);
  transform: rotate(30deg);
  position: absolute;
  top: 0;
  left: 0;
}

.confetti .dodecagram:after {
  content: "";
  height: 0.8rem;
  width: 0.8rem;
  background: var(--bg);
  transform: rotate(60deg);
  position: absolute;
  top: 0;
  left: 0;
}

.confetti .wavy-line {
  position: relative;
}

.confetti .wavy-line::after,
.confetti .wavy-line::before {
  content: "";
  height: 1rem;
  width: 8rem;
  background-size: 2rem 1rem;
  position: absolute;
  left: -9rem;
  transform: rotate(90deg);
}

.confetti .wavy-line::before {
  background-image: linear-gradient(
    45deg,
    transparent,
    transparent 50%,
    var(--bg) 50%,
    transparent 60%
  );
  top: 1rem;
}

.confetti .wavy-line::after {
  background-image: linear-gradient(
    -45deg,
    transparent,
    transparent 50%,
    var(--bg) 50%,
    transparent 60%
  );
}

.confetti i {
  width: 3rem;
  height: 3rem;
  margin: 0 0.2rem;
  animation-name: confetti;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: calc(70s / var(--speed));
}

.confetti i:nth-child(even) {
  transform: rotate(90deg);
}

@keyframes confetti {
  0% {
    transform: translateY(-500px);
  }

  100% {
    transform: translateY(500px);
  }
}

HTML

1<div class="level-up-notification">
2  <div class="confetti"></div>
3  <div class="level-up-text">Level Up!</div>
4</div>
5
6<div class="confetti-container">
7  <div class="confetti">
8    <i class="square" style="--speed: 10; --bg: yellow"></i>
9    <i class="pentagram" style="--speed: 18; --bg: white"></i>
10    <i class="rectangle" style="--speed: 29; --bg: green"></i>
11    <i class="hexagram" style="--speed: 17; --bg: blue"></i>
12    <i class="pentagram" style="--speed: 33; --bg: red"></i>
13    <i class="dodecagram" style="--speed: 26; --bg: yellow"></i>
14    <i class="wavy-line" style="--speed: 24; --bg: pink"> </i>
15    <i class="wavy-line" style="--speed: 5; --bg: blue"></i>
16    <i class="square" style="--speed: 40; --bg: white"></i>
17    <i class="rectangle" style="--speed: 17; --bg: green"></i>
18    <i class="square" style="--speed: 25; --bg: white"></i>
19    <i class="rectangle" style="--speed: 18; --bg: green"></i>
20    <i class="wavy-line" style="--speed: 15; --bg: yellow"> </i>
21    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
22    <i class="square" style="--speed: 25; --bg: white"></i>
23    <i class="rectangle" style="--speed: 18; --bg: green"></i>
24    <i class="dodecagram" style="--speed: 37; --bg: yellow"></i>
25    <i class="wavy-line" style="--speed: 23; --bg: pink"></i>
26    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
27    <i class="wavy-line" style="--speed: 37; --bg: pink"></i>
28    <i class="hexagram" style="--speed: 36; --bg: white"></i>
29    <i class="wavy-line" style="--speed: 32; --bg: green"></i>
30    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
31    <i class="square" style="--speed: 29; --bg: white"></i>
32    <i class="rectangle" style="--speed: 18; --bg: green"></i>
33    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
34    <i class="wavy-line" style="--speed: 23; --bg: pink"> </i>
35    <i class="rectangle" style="--speed: 30; --bg: pink"></i>
36    <i class="square" style="--speed: 30; --bg: red"></i>
37    <i class="pentagram" style="--speed: 18; --bg: red"></i>
38    <i class="rectangle" style="--speed: 19; --bg: green"></i>
39    <i class="hexagram" style="--speed: 16; --bg: blue"></i>
40    <i class="pentagram" style="--speed: 23; --bg: red"></i>
41    <i class="dodecagram" style="--speed: 34; --bg: yellow"></i>
42    <i class="wavy-line" style="--speed: 39; --bg: pink"></i>
43    <i class="square" style="--speed: 40; --bg: purple"></i>
44    <i class="rectangle" style="--speed: 21; --bg: green"></i>
45    <i class="square" style="--speed: 14; --bg: white"></i>
46    <i class="rectangle" style="--speed: 38; --bg: green"></i>
47    <i class="dodecagram" style="--speed: 19; --bg: red"></i>
48    <i class="wavy-line" style="--speed: 29; --bg: pink"> </i>
49    <i class="hexagram" style="--speed: 21; --bg: white"></i>
50    <i class="wavy-line" style="--speed: 17; --bg: purple"></i>
51    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
52    <i class="square" style="--speed: 23; --bg: white"></i>
53    <i class="rectangle" style="--speed: 18; --bg: green"></i>
54    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
55    <i class="wavy-line" style="--speed: 48; --bg: pink"> </i>
56    <i class="rectangle" style="--speed: 38; --bg: pink"></i>
57    <i class="pentagram" style="--speed: 13; --bg: red"></i>
58    <i class="dodecagram" style="--speed: 49; --bg: yellow"></i>
59    <i class="wavy-line" style="--speed: 19; --bg: cyan"></i>
60    <i class="square" style="--speed: 15; --bg: steelblue"></i>
61    <i class="square" style="--speed: 10; --bg: yellow"></i>
62    <i class="pentagram" style="--speed: 18; --bg: white"></i>
63    <i class="rectangle" style="--speed: 29; --bg: green"></i>
64    <i class="hexagram" style="--speed: 17; --bg: blue"></i>
65    <i class="pentagram" style="--speed: 33; --bg: red"></i>
66    <i class="dodecagram" style="--speed: 26; --bg: yellow"></i>
67    <i class="wavy-line" style="--speed: 24; --bg: pink"> </i>
68    <i class="wavy-line" style="--speed: 5; --bg: white"></i>
69    <i class="square" style="--speed: 40; --bg: purple"></i>
70    <i class="rectangle" style="--speed: 17; --bg: green"></i>
71    <i class="square" style="--speed: 25; --bg: white"></i>
72    <i class="rectangle" style="--speed: 18; --bg: green"></i>
73    <i class="wavy-line" style="--speed: 15; --bg: cyan"> </i>
74    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
75    <i class="square" style="--speed: 45; --bg: white"></i>
76    <i class="rectangle" style="--speed: 18; --bg: green"></i>
77    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
78    <i class="wavy-line" style="--speed: 23; --bg: pink"> </i>
79    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
80    <i class="wavy-line" style="--speed: 37; --bg: pink"> </i>
81    <i class="hexagram" style="--speed: 26; --bg: white"></i>
82    <i class="wavy-line" style="--speed: 32; --bg: cyan"></i>
83    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
84    <i class="square" style="--speed: 45; --bg: white"></i>
85    <i class="rectangle" style="--speed: 18; --bg: green"></i>
86    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
87    <i class="wavy-line" style="--speed: 23; --bg: pink"> </i>
88    <i class="rectangle" style="--speed: 50; --bg: pink"></i>
89    <i class="square" style="--speed: 30; --bg: red"></i>
90    <i class="pentagram" style="--speed: 18; --bg: red"></i>
91    <i class="rectangle" style="--speed: 19; --bg: green"></i>
92    <i class="hexagram" style="--speed: 16; --bg: blue"></i>
93    <i class="pentagram" style="--speed: 23; --bg: red"></i>
94    <i class="dodecagram" style="--speed: 33; --bg: yellow"></i>
95    <i class="wavy-line" style="--speed: 39; --bg: white"></i>
96    <i class="square" style="--speed: 40; --bg: orange"></i>
97    <i class="rectangle" style="--speed: 21; --bg: green"></i>
98    <i class="square" style="--speed: 14; --bg: white"></i>
99    <i class="rectangle" style="--speed: 38; --bg: green"></i>
100    <i class="dodecagram" style="--speed: 19; --bg: red"></i>
101    <i class="wavy-line" style="--speed: 29; --bg: pink"> </i>
102    <i class="hexagram" style="--speed: 34; --bg: white"></i>
103    <i class="wavy-line" style="--speed: 17; --bg: indigo"></i>
104    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
105    <i class="square" style="--speed: 23; --bg: white"></i>
106    <i class="rectangle" style="--speed: 18; --bg: green"></i>
107    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
108    <i class="wavy-line" style="--speed: 48; --bg: pink"> </i>
109    <i class="rectangle" style="--speed: 38; --bg: pink"></i>
110    <i class="pentagram" style="--speed: 13; --bg: red"></i>
111    <i class="dodecagram" style="--speed: 49; --bg: yellow"></i>
112    <i class="wavy-line" style="--speed: 19; --bg: purple"></i>
113    <i class="square" style="--speed: 15; --bg: cyan"></i>
114  </div>
115</div>

<div class="level-up-notification">
  <div class="confetti"></div>
  <div class="level-up-text">Level Up!</div>
</div>

<div class="confetti-container">
  <div class="confetti">
    <i class="square" style="--speed: 10; --bg: yellow"></i>
    <i class="pentagram" style="--speed: 18; --bg: white"></i>
    <i class="rectangle" style="--speed: 29; --bg: green"></i>
    <i class="hexagram" style="--speed: 17; --bg: blue"></i>
    <i class="pentagram" style="--speed: 33; --bg: red"></i>
    <i class="dodecagram" style="--speed: 26; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 24; --bg: pink"> </i>
    <i class="wavy-line" style="--speed: 5; --bg: blue"></i>
    <i class="square" style="--speed: 40; --bg: white"></i>
    <i class="rectangle" style="--speed: 17; --bg: green"></i>
    <i class="square" style="--speed: 25; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="wavy-line" style="--speed: 15; --bg: yellow"> </i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 25; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 23; --bg: pink"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 37; --bg: pink"></i>
    <i class="hexagram" style="--speed: 36; --bg: white"></i>
    <i class="wavy-line" style="--speed: 32; --bg: green"></i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 29; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 23; --bg: pink"> </i>
    <i class="rectangle" style="--speed: 30; --bg: pink"></i>
    <i class="square" style="--speed: 30; --bg: red"></i>
    <i class="pentagram" style="--speed: 18; --bg: red"></i>
    <i class="rectangle" style="--speed: 19; --bg: green"></i>
    <i class="hexagram" style="--speed: 16; --bg: blue"></i>
    <i class="pentagram" style="--speed: 23; --bg: red"></i>
    <i class="dodecagram" style="--speed: 34; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 39; --bg: pink"></i>
    <i class="square" style="--speed: 40; --bg: purple"></i>
    <i class="rectangle" style="--speed: 21; --bg: green"></i>
    <i class="square" style="--speed: 14; --bg: white"></i>
    <i class="rectangle" style="--speed: 38; --bg: green"></i>
    <i class="dodecagram" style="--speed: 19; --bg: red"></i>
    <i class="wavy-line" style="--speed: 29; --bg: pink"> </i>
    <i class="hexagram" style="--speed: 21; --bg: white"></i>
    <i class="wavy-line" style="--speed: 17; --bg: purple"></i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 23; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 48; --bg: pink"> </i>
    <i class="rectangle" style="--speed: 38; --bg: pink"></i>
    <i class="pentagram" style="--speed: 13; --bg: red"></i>
    <i class="dodecagram" style="--speed: 49; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 19; --bg: cyan"></i>
    <i class="square" style="--speed: 15; --bg: steelblue"></i>
    <i class="square" style="--speed: 10; --bg: yellow"></i>
    <i class="pentagram" style="--speed: 18; --bg: white"></i>
    <i class="rectangle" style="--speed: 29; --bg: green"></i>
    <i class="hexagram" style="--speed: 17; --bg: blue"></i>
    <i class="pentagram" style="--speed: 33; --bg: red"></i>
    <i class="dodecagram" style="--speed: 26; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 24; --bg: pink"> </i>
    <i class="wavy-line" style="--speed: 5; --bg: white"></i>
    <i class="square" style="--speed: 40; --bg: purple"></i>
    <i class="rectangle" style="--speed: 17; --bg: green"></i>
    <i class="square" style="--speed: 25; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="wavy-line" style="--speed: 15; --bg: cyan"> </i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 45; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 23; --bg: pink"> </i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 37; --bg: pink"> </i>
    <i class="hexagram" style="--speed: 26; --bg: white"></i>
    <i class="wavy-line" style="--speed: 32; --bg: cyan"></i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 45; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 23; --bg: pink"> </i>
    <i class="rectangle" style="--speed: 50; --bg: pink"></i>
    <i class="square" style="--speed: 30; --bg: red"></i>
    <i class="pentagram" style="--speed: 18; --bg: red"></i>
    <i class="rectangle" style="--speed: 19; --bg: green"></i>
    <i class="hexagram" style="--speed: 16; --bg: blue"></i>
    <i class="pentagram" style="--speed: 23; --bg: red"></i>
    <i class="dodecagram" style="--speed: 33; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 39; --bg: white"></i>
    <i class="square" style="--speed: 40; --bg: orange"></i>
    <i class="rectangle" style="--speed: 21; --bg: green"></i>
    <i class="square" style="--speed: 14; --bg: white"></i>
    <i class="rectangle" style="--speed: 38; --bg: green"></i>
    <i class="dodecagram" style="--speed: 19; --bg: red"></i>
    <i class="wavy-line" style="--speed: 29; --bg: pink"> </i>
    <i class="hexagram" style="--speed: 34; --bg: white"></i>
    <i class="wavy-line" style="--speed: 17; --bg: indigo"></i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 23; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 48; --bg: pink"> </i>
    <i class="rectangle" style="--speed: 38; --bg: pink"></i>
    <i class="pentagram" style="--speed: 13; --bg: red"></i>
    <i class="dodecagram" style="--speed: 49; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 19; --bg: purple"></i>
    <i class="square" style="--speed: 15; --bg: cyan"></i>
  </div>
</div>