animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back

rendered animation

Spiral Tower

1<div class="spiral-tower">
2  <div class="cube">
3    <div class="face cube__front"></div>
4    <div class="face cube__back"></div>
5    <div class="face cube__right"></div>
6    <div class="face cube__left"></div>
7    <div class="face cube__top"></div>
8    <div class="face cube__bottom"></div>
9  </div>
10  <div class="cube">
11    <div class="face cube__front"></div>
12    <div class="face cube__back"></div>
13    <div class="face cube__right"></div>
14    <div class="face cube__left"></div>
15    <div class="face cube__top"></div>
16    <div class="face cube__bottom"></div>
17  </div>
18  <div class="cube">
19    <div class="face cube__front"></div>
20    <div class="face cube__back"></div>
21    <div class="face cube__right"></div>
22    <div class="face cube__left"></div>
23    <div class="face cube__top"></div>
24    <div class="face cube__bottom"></div>
25  </div>
26  <div class="cube">
27    <div class="face cube__front"></div>
28    <div class="face cube__back"></div>
29    <div class="face cube__right"></div>
30    <div class="face cube__left"></div>
31    <div class="face cube__top"></div>
32    <div class="face cube__bottom"></div>
33  </div>
34  <div class="cube">
35    <div class="face cube__front"></div>
36    <div class="face cube__back"></div>
37    <div class="face cube__right"></div>
38    <div class="face cube__left"></div>
39    <div class="face cube__top"></div>
40    <div class="face cube__bottom"></div>
41  </div>
42  <div class="cube">
43    <div class="face cube__front"></div>
44    <div class="face cube__back"></div>
45    <div class="face cube__right"></div>
46    <div class="face cube__left"></div>
47    <div class="face cube__top"></div>
48    <div class="face cube__bottom"></div>
49  </div>
50  <div class="cube">
51    <div class="face cube__front"></div>
52    <div class="face cube__back"></div>
53    <div class="face cube__right"></div>
54    <div class="face cube__left"></div>
55    <div class="face cube__top"></div>
56    <div class="face cube__bottom"></div>
57  </div>
58  <div class="cube">
59    <div class="face cube__front"></div>
60    <div class="face cube__back"></div>
61    <div class="face cube__right"></div>
62    <div class="face cube__left"></div>
63    <div class="face cube__top"></div>
64    <div class="face cube__bottom"></div>
65  </div>
66  <div class="cube">
67    <div class="face cube__front"></div>
68    <div class="face cube__back"></div>
69    <div class="face cube__right"></div>
70    <div class="face cube__left"></div>
71    <div class="face cube__top"></div>
72    <div class="face cube__bottom"></div>
73  </div>
74  <div class="cube">
75    <div class="face cube__front"></div>
76    <div class="face cube__back"></div>
77    <div class="face cube__right"></div>
78    <div class="face cube__left"></div>
79    <div class="face cube__top"></div>
80    <div class="face cube__bottom"></div>
81  </div>
82  <div class="cube">
83    <div class="face cube__front"></div>
84    <div class="face cube__back"></div>
85    <div class="face cube__right"></div>
86    <div class="face cube__left"></div>
87    <div class="face cube__top"></div>
88    <div class="face cube__bottom"></div>
89  </div>
90  <div class="cube">
91    <div class="face cube__front"></div>
92    <div class="face cube__back"></div>
93    <div class="face cube__right"></div>
94    <div class="face cube__left"></div>
95    <div class="face cube__top"></div>
96    <div class="face cube__bottom"></div>
97  </div>
98  <div class="cube">
99    <div class="face cube__front"></div>
100    <div class="face cube__back"></div>
101    <div class="face cube__right"></div>
102    <div class="face cube__left"></div>
103    <div class="face cube__top"></div>
104    <div class="face cube__bottom"></div>
105  </div>
106  <div class="cube">
107    <div class="face cube__front"></div>
108    <div class="face cube__back"></div>
109    <div class="face cube__right"></div>
110    <div class="face cube__left"></div>
111    <div class="face cube__top"></div>
112    <div class="face cube__bottom"></div>
113  </div>
114  <div class="cube">
115    <div class="face cube__front"></div>
116    <div class="face cube__back"></div>
117    <div class="face cube__right"></div>
118    <div class="face cube__left"></div>
119    <div class="face cube__top"></div>
120    <div class="face cube__bottom"></div>
121  </div>
122  <div class="cube">
123    <div class="face cube__front"></div>
124    <div class="face cube__back"></div>
125    <div class="face cube__right"></div>
126    <div class="face cube__left"></div>
127    <div class="face cube__top"></div>
128    <div class="face cube__bottom"></div>
129  </div>
130  <div class="cube">
131    <div class="face cube__front"></div>
132    <div class="face cube__back"></div>
133    <div class="face cube__right"></div>
134    <div class="face cube__left"></div>
135    <div class="face cube__top"></div>
136    <div class="face cube__bottom"></div>
137  </div>
138  <div class="cube">
139    <div class="face cube__front"></div>
140    <div class="face cube__back"></div>
141    <div class="face cube__right"></div>
142    <div class="face cube__left"></div>
143    <div class="face cube__top"></div>
144    <div class="face cube__bottom"></div>
145  </div>
146  <div class="cube">
147    <div class="face cube__front"></div>
148    <div class="face cube__back"></div>
149    <div class="face cube__right"></div>
150    <div class="face cube__left"></div>
151    <div class="face cube__top"></div>
152    <div class="face cube__bottom"></div>
153  </div>
154  <div class="cube">
155    <div class="face cube__front"></div>
156    <div class="face cube__back"></div>
157    <div class="face cube__right"></div>
158    <div class="face cube__left"></div>
159    <div class="face cube__top"></div>
160    <div class="face cube__bottom"></div>
161  </div>
162  <div class="cube">
163    <div class="face cube__front"></div>
164    <div class="face cube__back"></div>
165    <div class="face cube__right"></div>
166    <div class="face cube__left"></div>
167    <div class="face cube__top"></div>
168    <div class="face cube__bottom"></div>
169  </div>
170  <div class="cube">
171    <div class="face cube__front"></div>
172    <div class="face cube__back"></div>
173    <div class="face cube__right"></div>
174    <div class="face cube__left"></div>
175    <div class="face cube__top"></div>
176    <div class="face cube__bottom"></div>
177  </div>
178  <div class="cube">
179    <div class="face cube__front"></div>
180    <div class="face cube__back"></div>
181    <div class="face cube__right"></div>
182    <div class="face cube__left"></div>
183    <div class="face cube__top"></div>
184    <div class="face cube__bottom"></div>
185  </div>
186  <div class="cube">
187    <div class="face cube__front"></div>
188    <div class="face cube__back"></div>
189    <div class="face cube__right"></div>
190    <div class="face cube__left"></div>
191    <div class="face cube__top"></div>
192    <div class="face cube__bottom"></div>
193  </div>
194  <div class="cube">
195    <div class="face cube__front"></div>
196    <div class="face cube__back"></div>
197    <div class="face cube__right"></div>
198    <div class="face cube__left"></div>
199    <div class="face cube__top"></div>
200    <div class="face cube__bottom"></div>
201  </div>
202  <div class="cube">
203    <div class="face cube__front"></div>
204    <div class="face cube__back"></div>
205    <div class="face cube__right"></div>
206    <div class="face cube__left"></div>
207    <div class="face cube__top"></div>
208    <div class="face cube__bottom"></div>
209  </div>
210  <div class="cube">
211    <div class="face cube__front"></div>
212    <div class="face cube__back"></div>
213    <div class="face cube__right"></div>
214    <div class="face cube__left"></div>
215    <div class="face cube__top"></div>
216    <div class="face cube__bottom"></div>
217  </div>
218  <div class="cube">
219    <div class="face cube__front"></div>
220    <div class="face cube__back"></div>
221    <div class="face cube__right"></div>
222    <div class="face cube__left"></div>
223    <div class="face cube__top"></div>
224    <div class="face cube__bottom"></div>
225  </div>
226  <div class="cube">
227    <div class="face cube__front"></div>
228    <div class="face cube__back"></div>
229    <div class="face cube__right"></div>
230    <div class="face cube__left"></div>
231    <div class="face cube__top"></div>
232    <div class="face cube__bottom"></div>
233  </div>
234  <div class="cube">
235    <div class="face cube__front"></div>
236    <div class="face cube__back"></div>
237    <div class="face cube__right"></div>
238    <div class="face cube__left"></div>
239    <div class="face cube__top"></div>
240    <div class="face cube__bottom"></div>
241  </div>
242  <div class="cube">
243    <div class="face cube__front"></div>
244    <div class="face cube__back"></div>
245    <div class="face cube__right"></div>
246    <div class="face cube__left"></div>
247    <div class="face cube__top"></div>
248    <div class="face cube__bottom"></div>
249  </div>
250  <div class="cube">
251    <div class="face cube__front"></div>
252    <div class="face cube__back"></div>
253    <div class="face cube__right"></div>
254    <div class="face cube__left"></div>
255    <div class="face cube__top"></div>
256    <div class="face cube__bottom"></div>
257  </div>
258  <div class="cube">
259    <div class="face cube__front"></div>
260    <div class="face cube__back"></div>
261    <div class="face cube__right"></div>
262    <div class="face cube__left"></div>
263    <div class="face cube__top"></div>
264    <div class="face cube__bottom"></div>
265  </div>
266  <div class="cube">
267    <div class="face cube__front"></div>
268    <div class="face cube__back"></div>
269    <div class="face cube__right"></div>
270    <div class="face cube__left"></div>
271    <div class="face cube__top"></div>
272    <div class="face cube__bottom"></div>
273  </div>
274  <div class="cube">
275    <div class="face cube__front"></div>
276    <div class="face cube__back"></div>
277    <div class="face cube__right"></div>
278    <div class="face cube__left"></div>
279    <div class="face cube__top"></div>
280    <div class="face cube__bottom"></div>
281  </div>
282  <div class="cube">
283    <div class="face cube__front"></div>
284    <div class="face cube__back"></div>
285    <div class="face cube__right"></div>
286    <div class="face cube__left"></div>
287    <div class="face cube__top"></div>
288    <div class="face cube__bottom"></div>
289  </div>
290  <div class="cube">
291    <div class="face cube__front"></div>
292    <div class="face cube__back"></div>
293    <div class="face cube__right"></div>
294    <div class="face cube__left"></div>
295    <div class="face cube__top"></div>
296    <div class="face cube__bottom"></div>
297  </div>
298  <div class="cube">
299    <div class="face cube__front"></div>
300    <div class="face cube__back"></div>
301    <div class="face cube__right"></div>
302    <div class="face cube__left"></div>
303    <div class="face cube__top"></div>
304    <div class="face cube__bottom"></div>
305  </div>
306  <div class="cube">
307    <div class="face cube__front"></div>
308    <div class="face cube__back"></div>
309    <div class="face cube__right"></div>
310    <div class="face cube__left"></div>
311    <div class="face cube__top"></div>
312    <div class="face cube__bottom"></div>
313  </div>
314  <div class="cube">
315    <div class="face cube__front"></div>
316    <div class="face cube__back"></div>
317    <div class="face cube__right"></div>
318    <div class="face cube__left"></div>
319    <div class="face cube__top"></div>
320    <div class="face cube__bottom"></div>
321  </div>
322  <div class="cube">
323    <div class="face cube__front"></div>
324    <div class="face cube__back"></div>
325    <div class="face cube__right"></div>
326    <div class="face cube__left"></div>
327    <div class="face cube__top"></div>
328    <div class="face cube__bottom"></div>
329  </div>
330  <div class="cube">
331    <div class="face cube__front"></div>
332    <div class="face cube__back"></div>
333    <div class="face cube__right"></div>
334    <div class="face cube__left"></div>
335    <div class="face cube__top"></div>
336    <div class="face cube__bottom"></div>
337  </div>
338  <div class="cube">
339    <div class="face cube__front"></div>
340    <div class="face cube__back"></div>
341    <div class="face cube__right"></div>
342    <div class="face cube__left"></div>
343    <div class="face cube__top"></div>
344    <div class="face cube__bottom"></div>
345  </div>
346  <div class="cube">
347    <div class="face cube__front"></div>
348    <div class="face cube__back"></div>
349    <div class="face cube__right"></div>
350    <div class="face cube__left"></div>
351    <div class="face cube__top"></div>
352    <div class="face cube__bottom"></div>
353  </div>
354  <div class="cube">
355    <div class="face cube__front"></div>
356    <div class="face cube__back"></div>
357    <div class="face cube__right"></div>
358    <div class="face cube__left"></div>
359    <div class="face cube__top"></div>
360    <div class="face cube__bottom"></div>
361  </div>
362  <div class="cube">
363    <div class="face cube__front"></div>
364    <div class="face cube__back"></div>
365    <div class="face cube__right"></div>
366    <div class="face cube__left"></div>
367    <div class="face cube__top"></div>
368    <div class="face cube__bottom"></div>
369  </div>
370  <div class="cube">
371    <div class="face cube__front"></div>
372    <div class="face cube__back"></div>
373    <div class="face cube__right"></div>
374    <div class="face cube__left"></div>
375    <div class="face cube__top"></div>
376    <div class="face cube__bottom"></div>
377  </div>
378  <div class="cube">
379    <div class="face cube__front"></div>
380    <div class="face cube__back"></div>
381    <div class="face cube__right"></div>
382    <div class="face cube__left"></div>
383    <div class="face cube__top"></div>
384    <div class="face cube__bottom"></div>
385  </div>
386</div>
387