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

rendered animation

3D Christmas Tree

1<div class="conic">
2  <div class="group" style="--t:1;--r:0">
3    <div class="orbit" style="--i:1;--ball-color:var(--danger-color)">
4      <div class="point"></div>
5    </div>
6  </div>
7  <div class="group" style="--t:8;--r:1rem">
8    <div class="orbit" style="--i:1">
9      <div class="point"></div>
10    </div>
11    <div class="orbit" style="--i:2">
12      <div class="point"></div>
13    </div>
14    <div class="orbit" style="--i:3">
15      <div class="point"></div>
16    </div>
17    <div class="orbit" style="--i:4">
18      <div class="point"></div>
19    </div>
20    <div class="orbit" style="--i:5">
21      <div class="point"></div>
22    </div>
23    <div class="orbit" style="--i:6">
24      <div class="point"></div>
25    </div>
26    <div class="orbit" style="--i:7">
27      <div class="point"></div>
28    </div>
29    <div class="orbit" style="--i:8">
30      <div class="point"></div>
31    </div>
32  </div>
33  <div class="group" style="--t:10;--r:2rem">
34    <div class="orbit" style="--i:1">
35      <div class="point"></div>
36    </div>
37    <div class="orbit" style="--i:2">
38      <div class="point"></div>
39    </div>
40    <div class="orbit" style="--i:3">
41      <div class="point"></div>
42    </div>
43    <div class="orbit" style="--i:4">
44      <div class="point"></div>
45    </div>
46    <div class="orbit" style="--i:5">
47      <div class="point"></div>
48    </div>
49    <div class="orbit" style="--i:6">
50      <div class="point"></div>
51    </div>
52    <div class="orbit" style="--i:7">
53      <div class="point"></div>
54    </div>
55    <div class="orbit" style="--i:8">
56      <div class="point"></div>
57    </div>
58    <div class="orbit" style="--i:9">
59      <div class="point"></div>
60    </div>
61    <div class="orbit" style="--i:10">
62      <div class="point"></div>
63    </div>
64  </div>
65  <div class="group" style="--t:12;--r:3rem">
66    <div class="orbit" style="--i:1">
67      <div class="point"></div>
68    </div>
69    <div class="orbit" style="--i:2">
70      <div class="point"></div>
71    </div>
72    <div class="orbit" style="--i:3">
73      <div class="point"></div>
74    </div>
75    <div class="orbit" style="--i:4">
76      <div class="point"></div>
77    </div>
78    <div class="orbit" style="--i:5">
79      <div class="point"></div>
80    </div>
81    <div class="orbit" style="--i:6">
82      <div class="point"></div>
83    </div>
84    <div class="orbit" style="--i:7">
85      <div class="point"></div>
86    </div>
87    <div class="orbit" style="--i:8">
88      <div class="point"></div>
89    </div>
90    <div class="orbit" style="--i:9">
91      <div class="point"></div>
92    </div>
93    <div class="orbit" style="--i:10">
94      <div class="point"></div>
95    </div>
96    <div class="orbit" style="--i:11">
97      <div class="point"></div>
98    </div>
99    <div class="orbit" style="--i:12">
100      <div class="point"></div>
101    </div>
102  </div>
103  <div class="group" style="--t:14;--r:4rem">
104    <div class="orbit" style="--i:1">
105      <div class="point"></div>
106    </div>
107    <div class="orbit" style="--i:2">
108      <div class="point"></div>
109    </div>
110    <div class="orbit" style="--i:3">
111      <div class="point"></div>
112    </div>
113    <div class="orbit" style="--i:4">
114      <div class="point"></div>
115    </div>
116    <div class="orbit" style="--i:5">
117      <div class="point"></div>
118    </div>
119    <div class="orbit" style="--i:6">
120      <div class="point"></div>
121    </div>
122    <div class="orbit" style="--i:7">
123      <div class="point"></div>
124    </div>
125    <div class="orbit" style="--i:8">
126      <div class="point"></div>
127    </div>
128    <div class="orbit" style="--i:9">
129      <div class="point"></div>
130    </div>
131    <div class="orbit" style="--i:10">
132      <div class="point"></div>
133    </div>
134    <div class="orbit" style="--i:11">
135      <div class="point"></div>
136    </div>
137    <div class="orbit" style="--i:12">
138      <div class="point"></div>
139    </div>
140    <div class="orbit" style="--i:13">
141      <div class="point"></div>
142    </div>
143    <div class="orbit" style="--i:14">
144      <div class="point"></div>
145    </div>
146  </div>
147  <div class="group" style="--t:16;--r:5rem">
148    <div class="orbit" style="--i:1">
149      <div class="point"></div>
150    </div>
151    <div class="orbit" style="--i:2">
152      <div class="point"></div>
153    </div>
154    <div class="orbit" style="--i:3">
155      <div class="point"></div>
156    </div>
157    <div class="orbit" style="--i:4">
158      <div class="point"></div>
159    </div>
160    <div class="orbit" style="--i:5">
161      <div class="point"></div>
162    </div>
163    <div class="orbit" style="--i:6">
164      <div class="point"></div>
165    </div>
166    <div class="orbit" style="--i:7">
167      <div class="point"></div>
168    </div>
169    <div class="orbit" style="--i:8">
170      <div class="point"></div>
171    </div>
172    <div class="orbit" style="--i:9">
173      <div class="point"></div>
174    </div>
175    <div class="orbit" style="--i:10">
176      <div class="point"></div>
177    </div>
178    <div class="orbit" style="--i:11">
179      <div class="point"></div>
180    </div>
181    <div class="orbit" style="--i:12">
182      <div class="point"></div>
183    </div>
184    <div class="orbit" style="--i:13">
185      <div class="point"></div>
186    </div>
187    <div class="orbit" style="--i:14">
188      <div class="point"></div>
189    </div>
190    <div class="orbit" style="--i:15">
191      <div class="point"></div>
192    </div>
193    <div class="orbit" style="--i:16">
194      <div class="point"></div>
195    </div>
196  </div>
197  <div class="group" style="--t:18;--r:6rem">
198    <div class="orbit" style="--i:1">
199      <div class="point"></div>
200    </div>
201    <div class="orbit" style="--i:2">
202      <div class="point"></div>
203    </div>
204    <div class="orbit" style="--i:3">
205      <div class="point"></div>
206    </div>
207    <div class="orbit" style="--i:4">
208      <div class="point"></div>
209    </div>
210    <div class="orbit" style="--i:5">
211      <div class="point"></div>
212    </div>
213    <div class="orbit" style="--i:6">
214      <div class="point"></div>
215    </div>
216    <div class="orbit" style="--i:7">
217      <div class="point"></div>
218    </div>
219    <div class="orbit" style="--i:8">
220      <div class="point"></div>
221    </div>
222    <div class="orbit" style="--i:9">
223      <div class="point"></div>
224    </div>
225    <div class="orbit" style="--i:10">
226      <div class="point"></div>
227    </div>
228    <div class="orbit" style="--i:11">
229      <div class="point"></div>
230    </div>
231    <div class="orbit" style="--i:12">
232      <div class="point"></div>
233    </div>
234    <div class="orbit" style="--i:13">
235      <div class="point"></div>
236    </div>
237    <div class="orbit" style="--i:14">
238      <div class="point"></div>
239    </div>
240    <div class="orbit" style="--i:15">
241      <div class="point"></div>
242    </div>
243    <div class="orbit" style="--i:16">
244      <div class="point"></div>
245    </div>
246    <div class="orbit" style="--i:17">
247      <div class="point"></div>
248    </div>
249    <div class="orbit" style="--i:18">
250      <div class="point"></div>
251    </div>
252  </div>
253</div>