-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdistribute-on-circle-max-16.css
435 lines (435 loc) · 19 KB
/
distribute-on-circle-max-16.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
.circle-container {
position: relative;
width: 20em;
height: 20em;
padding: 0;
border-radius: 50%;
list-style: none;
box-sizing: content-box;
transform: rotate(-90deg);
margin: 5em auto 0;
border: solid 5px tomato;
}
.circle-container > * {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 6em;
height: 6em;
margin: -3em;
}
.circle-container > :first-child:nth-last-child(1) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(1) ~ :nth-of-type(2) {
transform: rotate(360deg) translate(10em) rotate(-270deg);
}
.circle-container > :first-child:nth-last-child(1) ~ :nth-of-type(1) {
transform: rotate(720deg) translate(10em) rotate(-630deg);
}
.circle-container > :first-child:nth-last-child(2) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(2) ~ :nth-of-type(2) {
transform: rotate(180deg) translate(10em) rotate(-90deg);
}
.circle-container > :first-child:nth-last-child(3) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(3) ~ :nth-of-type(2) {
transform: rotate(120deg) translate(10em) rotate(-30deg);
}
.circle-container > :first-child:nth-last-child(3) ~ :nth-of-type(3) {
transform: rotate(240deg) translate(10em) rotate(-150deg);
}
.circle-container > :first-child:nth-last-child(4) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(4) ~ :nth-of-type(2) {
transform: rotate(90deg) translate(10em) rotate(0deg);
}
.circle-container > :first-child:nth-last-child(4) ~ :nth-of-type(3) {
transform: rotate(180deg) translate(10em) rotate(-90deg);
}
.circle-container > :first-child:nth-last-child(4) ~ :nth-of-type(4) {
transform: rotate(270deg) translate(10em) rotate(-180deg);
}
.circle-container > :first-child:nth-last-child(5) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(5) ~ :nth-of-type(2) {
transform: rotate(72deg) translate(10em) rotate(18deg);
}
.circle-container > :first-child:nth-last-child(5) ~ :nth-of-type(3) {
transform: rotate(144deg) translate(10em) rotate(-54deg);
}
.circle-container > :first-child:nth-last-child(5) ~ :nth-of-type(4) {
transform: rotate(216deg) translate(10em) rotate(-126deg);
}
.circle-container > :first-child:nth-last-child(5) ~ :nth-of-type(5) {
transform: rotate(288deg) translate(10em) rotate(-198deg);
}
.circle-container > :first-child:nth-last-child(6) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(6) ~ :nth-of-type(2) {
transform: rotate(60deg) translate(10em) rotate(30deg);
}
.circle-container > :first-child:nth-last-child(6) ~ :nth-of-type(3) {
transform: rotate(120deg) translate(10em) rotate(-30deg);
}
.circle-container > :first-child:nth-last-child(6) ~ :nth-of-type(4) {
transform: rotate(180deg) translate(10em) rotate(-90deg);
}
.circle-container > :first-child:nth-last-child(6) ~ :nth-of-type(5) {
transform: rotate(240deg) translate(10em) rotate(-150deg);
}
.circle-container > :first-child:nth-last-child(6) ~ :nth-of-type(6) {
transform: rotate(300deg) translate(10em) rotate(-210deg);
}
.circle-container > :first-child:nth-last-child(7) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(7) ~ :nth-of-type(2) {
transform: rotate(51.4285714286deg) translate(10em) rotate(38.5714285714deg);
}
.circle-container > :first-child:nth-last-child(7) ~ :nth-of-type(3) {
transform: rotate(102.8571428571deg) translate(10em) rotate(-12.8571428571deg);
}
.circle-container > :first-child:nth-last-child(7) ~ :nth-of-type(4) {
transform: rotate(154.2857142857deg) translate(10em) rotate(-64.2857142857deg);
}
.circle-container > :first-child:nth-last-child(7) ~ :nth-of-type(5) {
transform: rotate(205.7142857143deg) translate(10em) rotate(-115.7142857143deg);
}
.circle-container > :first-child:nth-last-child(7) ~ :nth-of-type(6) {
transform: rotate(257.1428571429deg) translate(10em) rotate(-167.1428571429deg);
}
.circle-container > :first-child:nth-last-child(7) ~ :nth-of-type(7) {
transform: rotate(308.5714285714deg) translate(10em) rotate(-218.5714285714deg);
}
.circle-container > :first-child:nth-last-child(8) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(8) ~ :nth-of-type(2) {
transform: rotate(45deg) translate(10em) rotate(45deg);
}
.circle-container > :first-child:nth-last-child(8) ~ :nth-of-type(3) {
transform: rotate(90deg) translate(10em) rotate(0deg);
}
.circle-container > :first-child:nth-last-child(8) ~ :nth-of-type(4) {
transform: rotate(135deg) translate(10em) rotate(-45deg);
}
.circle-container > :first-child:nth-last-child(8) ~ :nth-of-type(5) {
transform: rotate(180deg) translate(10em) rotate(-90deg);
}
.circle-container > :first-child:nth-last-child(8) ~ :nth-of-type(6) {
transform: rotate(225deg) translate(10em) rotate(-135deg);
}
.circle-container > :first-child:nth-last-child(8) ~ :nth-of-type(7) {
transform: rotate(270deg) translate(10em) rotate(-180deg);
}
.circle-container > :first-child:nth-last-child(8) ~ :nth-of-type(8) {
transform: rotate(315deg) translate(10em) rotate(-225deg);
}
.circle-container > :first-child:nth-last-child(9) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(9) ~ :nth-of-type(2) {
transform: rotate(40deg) translate(10em) rotate(50deg);
}
.circle-container > :first-child:nth-last-child(9) ~ :nth-of-type(3) {
transform: rotate(80deg) translate(10em) rotate(10deg);
}
.circle-container > :first-child:nth-last-child(9) ~ :nth-of-type(4) {
transform: rotate(120deg) translate(10em) rotate(-30deg);
}
.circle-container > :first-child:nth-last-child(9) ~ :nth-of-type(5) {
transform: rotate(160deg) translate(10em) rotate(-70deg);
}
.circle-container > :first-child:nth-last-child(9) ~ :nth-of-type(6) {
transform: rotate(200deg) translate(10em) rotate(-110deg);
}
.circle-container > :first-child:nth-last-child(9) ~ :nth-of-type(7) {
transform: rotate(240deg) translate(10em) rotate(-150deg);
}
.circle-container > :first-child:nth-last-child(9) ~ :nth-of-type(8) {
transform: rotate(280deg) translate(10em) rotate(-190deg);
}
.circle-container > :first-child:nth-last-child(9) ~ :nth-of-type(9) {
transform: rotate(320deg) translate(10em) rotate(-230deg);
}
.circle-container > :first-child:nth-last-child(10) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(10) ~ :nth-of-type(2) {
transform: rotate(36deg) translate(10em) rotate(54deg);
}
.circle-container > :first-child:nth-last-child(10) ~ :nth-of-type(3) {
transform: rotate(72deg) translate(10em) rotate(18deg);
}
.circle-container > :first-child:nth-last-child(10) ~ :nth-of-type(4) {
transform: rotate(108deg) translate(10em) rotate(-18deg);
}
.circle-container > :first-child:nth-last-child(10) ~ :nth-of-type(5) {
transform: rotate(144deg) translate(10em) rotate(-54deg);
}
.circle-container > :first-child:nth-last-child(10) ~ :nth-of-type(6) {
transform: rotate(180deg) translate(10em) rotate(-90deg);
}
.circle-container > :first-child:nth-last-child(10) ~ :nth-of-type(7) {
transform: rotate(216deg) translate(10em) rotate(-126deg);
}
.circle-container > :first-child:nth-last-child(10) ~ :nth-of-type(8) {
transform: rotate(252deg) translate(10em) rotate(-162deg);
}
.circle-container > :first-child:nth-last-child(10) ~ :nth-of-type(9) {
transform: rotate(288deg) translate(10em) rotate(-198deg);
}
.circle-container > :first-child:nth-last-child(10) ~ :nth-of-type(10) {
transform: rotate(324deg) translate(10em) rotate(-234deg);
}
.circle-container > :first-child:nth-last-child(11) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(11) ~ :nth-of-type(2) {
transform: rotate(32.7272727273deg) translate(10em) rotate(57.2727272727deg);
}
.circle-container > :first-child:nth-last-child(11) ~ :nth-of-type(3) {
transform: rotate(65.4545454545deg) translate(10em) rotate(24.5454545455deg);
}
.circle-container > :first-child:nth-last-child(11) ~ :nth-of-type(4) {
transform: rotate(98.1818181818deg) translate(10em) rotate(-8.1818181818deg);
}
.circle-container > :first-child:nth-last-child(11) ~ :nth-of-type(5) {
transform: rotate(130.9090909091deg) translate(10em) rotate(-40.9090909091deg);
}
.circle-container > :first-child:nth-last-child(11) ~ :nth-of-type(6) {
transform: rotate(163.6363636364deg) translate(10em) rotate(-73.6363636364deg);
}
.circle-container > :first-child:nth-last-child(11) ~ :nth-of-type(7) {
transform: rotate(196.3636363636deg) translate(10em) rotate(-106.3636363636deg);
}
.circle-container > :first-child:nth-last-child(11) ~ :nth-of-type(8) {
transform: rotate(229.0909090909deg) translate(10em) rotate(-139.0909090909deg);
}
.circle-container > :first-child:nth-last-child(11) ~ :nth-of-type(9) {
transform: rotate(261.8181818182deg) translate(10em) rotate(-171.8181818182deg);
}
.circle-container > :first-child:nth-last-child(11) ~ :nth-of-type(10) {
transform: rotate(294.5454545455deg) translate(10em) rotate(-204.5454545455deg);
}
.circle-container > :first-child:nth-last-child(11) ~ :nth-of-type(11) {
transform: rotate(327.2727272727deg) translate(10em) rotate(-237.2727272727deg);
}
.circle-container > :first-child:nth-last-child(12) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(12) ~ :nth-of-type(2) {
transform: rotate(30deg) translate(10em) rotate(60deg);
}
.circle-container > :first-child:nth-last-child(12) ~ :nth-of-type(3) {
transform: rotate(60deg) translate(10em) rotate(30deg);
}
.circle-container > :first-child:nth-last-child(12) ~ :nth-of-type(4) {
transform: rotate(90deg) translate(10em) rotate(0deg);
}
.circle-container > :first-child:nth-last-child(12) ~ :nth-of-type(5) {
transform: rotate(120deg) translate(10em) rotate(-30deg);
}
.circle-container > :first-child:nth-last-child(12) ~ :nth-of-type(6) {
transform: rotate(150deg) translate(10em) rotate(-60deg);
}
.circle-container > :first-child:nth-last-child(12) ~ :nth-of-type(7) {
transform: rotate(180deg) translate(10em) rotate(-90deg);
}
.circle-container > :first-child:nth-last-child(12) ~ :nth-of-type(8) {
transform: rotate(210deg) translate(10em) rotate(-120deg);
}
.circle-container > :first-child:nth-last-child(12) ~ :nth-of-type(9) {
transform: rotate(240deg) translate(10em) rotate(-150deg);
}
.circle-container > :first-child:nth-last-child(12) ~ :nth-of-type(10) {
transform: rotate(270deg) translate(10em) rotate(-180deg);
}
.circle-container > :first-child:nth-last-child(12) ~ :nth-of-type(11) {
transform: rotate(300deg) translate(10em) rotate(-210deg);
}
.circle-container > :first-child:nth-last-child(12) ~ :nth-of-type(12) {
transform: rotate(330deg) translate(10em) rotate(-240deg);
}
.circle-container > :first-child:nth-last-child(13) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(13) ~ :nth-of-type(2) {
transform: rotate(27.6923076923deg) translate(10em) rotate(62.3076923077deg);
}
.circle-container > :first-child:nth-last-child(13) ~ :nth-of-type(3) {
transform: rotate(55.3846153846deg) translate(10em) rotate(34.6153846154deg);
}
.circle-container > :first-child:nth-last-child(13) ~ :nth-of-type(4) {
transform: rotate(83.0769230769deg) translate(10em) rotate(6.9230769231deg);
}
.circle-container > :first-child:nth-last-child(13) ~ :nth-of-type(5) {
transform: rotate(110.7692307692deg) translate(10em) rotate(-20.7692307692deg);
}
.circle-container > :first-child:nth-last-child(13) ~ :nth-of-type(6) {
transform: rotate(138.4615384615deg) translate(10em) rotate(-48.4615384615deg);
}
.circle-container > :first-child:nth-last-child(13) ~ :nth-of-type(7) {
transform: rotate(166.1538461538deg) translate(10em) rotate(-76.1538461538deg);
}
.circle-container > :first-child:nth-last-child(13) ~ :nth-of-type(8) {
transform: rotate(193.8461538462deg) translate(10em) rotate(-103.8461538462deg);
}
.circle-container > :first-child:nth-last-child(13) ~ :nth-of-type(9) {
transform: rotate(221.5384615385deg) translate(10em) rotate(-131.5384615385deg);
}
.circle-container > :first-child:nth-last-child(13) ~ :nth-of-type(10) {
transform: rotate(249.2307692308deg) translate(10em) rotate(-159.2307692308deg);
}
.circle-container > :first-child:nth-last-child(13) ~ :nth-of-type(11) {
transform: rotate(276.9230769231deg) translate(10em) rotate(-186.9230769231deg);
}
.circle-container > :first-child:nth-last-child(13) ~ :nth-of-type(12) {
transform: rotate(304.6153846154deg) translate(10em) rotate(-214.6153846154deg);
}
.circle-container > :first-child:nth-last-child(13) ~ :nth-of-type(13) {
transform: rotate(332.3076923077deg) translate(10em) rotate(-242.3076923077deg);
}
.circle-container > :first-child:nth-last-child(14) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(14) ~ :nth-of-type(2) {
transform: rotate(25.7142857143deg) translate(10em) rotate(64.2857142857deg);
}
.circle-container > :first-child:nth-last-child(14) ~ :nth-of-type(3) {
transform: rotate(51.4285714286deg) translate(10em) rotate(38.5714285714deg);
}
.circle-container > :first-child:nth-last-child(14) ~ :nth-of-type(4) {
transform: rotate(77.1428571429deg) translate(10em) rotate(12.8571428571deg);
}
.circle-container > :first-child:nth-last-child(14) ~ :nth-of-type(5) {
transform: rotate(102.8571428571deg) translate(10em) rotate(-12.8571428571deg);
}
.circle-container > :first-child:nth-last-child(14) ~ :nth-of-type(6) {
transform: rotate(128.5714285714deg) translate(10em) rotate(-38.5714285714deg);
}
.circle-container > :first-child:nth-last-child(14) ~ :nth-of-type(7) {
transform: rotate(154.2857142857deg) translate(10em) rotate(-64.2857142857deg);
}
.circle-container > :first-child:nth-last-child(14) ~ :nth-of-type(8) {
transform: rotate(180deg) translate(10em) rotate(-90deg);
}
.circle-container > :first-child:nth-last-child(14) ~ :nth-of-type(9) {
transform: rotate(205.7142857143deg) translate(10em) rotate(-115.7142857143deg);
}
.circle-container > :first-child:nth-last-child(14) ~ :nth-of-type(10) {
transform: rotate(231.4285714286deg) translate(10em) rotate(-141.4285714286deg);
}
.circle-container > :first-child:nth-last-child(14) ~ :nth-of-type(11) {
transform: rotate(257.1428571429deg) translate(10em) rotate(-167.1428571429deg);
}
.circle-container > :first-child:nth-last-child(14) ~ :nth-of-type(12) {
transform: rotate(282.8571428571deg) translate(10em) rotate(-192.8571428571deg);
}
.circle-container > :first-child:nth-last-child(14) ~ :nth-of-type(13) {
transform: rotate(308.5714285714deg) translate(10em) rotate(-218.5714285714deg);
}
.circle-container > :first-child:nth-last-child(14) ~ :nth-of-type(14) {
transform: rotate(334.2857142857deg) translate(10em) rotate(-244.2857142857deg);
}
.circle-container > :first-child:nth-last-child(15) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(15) ~ :nth-of-type(2) {
transform: rotate(24deg) translate(10em) rotate(66deg);
}
.circle-container > :first-child:nth-last-child(15) ~ :nth-of-type(3) {
transform: rotate(48deg) translate(10em) rotate(42deg);
}
.circle-container > :first-child:nth-last-child(15) ~ :nth-of-type(4) {
transform: rotate(72deg) translate(10em) rotate(18deg);
}
.circle-container > :first-child:nth-last-child(15) ~ :nth-of-type(5) {
transform: rotate(96deg) translate(10em) rotate(-6deg);
}
.circle-container > :first-child:nth-last-child(15) ~ :nth-of-type(6) {
transform: rotate(120deg) translate(10em) rotate(-30deg);
}
.circle-container > :first-child:nth-last-child(15) ~ :nth-of-type(7) {
transform: rotate(144deg) translate(10em) rotate(-54deg);
}
.circle-container > :first-child:nth-last-child(15) ~ :nth-of-type(8) {
transform: rotate(168deg) translate(10em) rotate(-78deg);
}
.circle-container > :first-child:nth-last-child(15) ~ :nth-of-type(9) {
transform: rotate(192deg) translate(10em) rotate(-102deg);
}
.circle-container > :first-child:nth-last-child(15) ~ :nth-of-type(10) {
transform: rotate(216deg) translate(10em) rotate(-126deg);
}
.circle-container > :first-child:nth-last-child(15) ~ :nth-of-type(11) {
transform: rotate(240deg) translate(10em) rotate(-150deg);
}
.circle-container > :first-child:nth-last-child(15) ~ :nth-of-type(12) {
transform: rotate(264deg) translate(10em) rotate(-174deg);
}
.circle-container > :first-child:nth-last-child(15) ~ :nth-of-type(13) {
transform: rotate(288deg) translate(10em) rotate(-198deg);
}
.circle-container > :first-child:nth-last-child(15) ~ :nth-of-type(14) {
transform: rotate(312deg) translate(10em) rotate(-222deg);
}
.circle-container > :first-child:nth-last-child(15) ~ :nth-of-type(15) {
transform: rotate(336deg) translate(10em) rotate(-246deg);
}
.circle-container > :first-child:nth-last-child(16) {
transform: rotate(0deg) translate(10em) rotate(90deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(2) {
transform: rotate(22.5deg) translate(10em) rotate(67.5deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(3) {
transform: rotate(45deg) translate(10em) rotate(45deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(4) {
transform: rotate(67.5deg) translate(10em) rotate(22.5deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(5) {
transform: rotate(90deg) translate(10em) rotate(0deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(6) {
transform: rotate(112.5deg) translate(10em) rotate(-22.5deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(7) {
transform: rotate(135deg) translate(10em) rotate(-45deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(8) {
transform: rotate(157.5deg) translate(10em) rotate(-67.5deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(9) {
transform: rotate(180deg) translate(10em) rotate(-90deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(10) {
transform: rotate(202.5deg) translate(10em) rotate(-112.5deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(11) {
transform: rotate(225deg) translate(10em) rotate(-135deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(12) {
transform: rotate(247.5deg) translate(10em) rotate(-157.5deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(13) {
transform: rotate(270deg) translate(10em) rotate(-180deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(14) {
transform: rotate(292.5deg) translate(10em) rotate(-202.5deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(15) {
transform: rotate(315deg) translate(10em) rotate(-225deg);
}
.circle-container > :first-child:nth-last-child(16) ~ :nth-of-type(16) {
transform: rotate(337.5deg) translate(10em) rotate(-247.5deg);
}