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

rendered animation

Gambit Squares

1<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
2
3<defs>
4	<g id="blackBoxes">
5 <g id="boxes0">
6        <rect x="-98.79" y="41.34" width="100" height="100"/>
7        <rect x="42.63" y="41.34" width="100" height="100"/>
8        
9          <rect x="184.05" y="41.34" width="100" height="100"/>
10        
11        
12          <rect x="325.47" y="41.34" width="100" height="100"/>
13        
14        
15          <rect x="466.9" y="41.34" width="100" height="100"/>
16        
17        
18          <rect x="608.32" y="41.34" width="100" height="100"/>
19        
20        
21          <rect x="749.74" y="41.34" width="100" height="100"/>
22        
23        
24          <rect x="891.16" y="41.34" width="100" height="100"/>
25        
26      </g>
27<g id="boxes1" transform="translate(0, 141.42)">
28        <rect x="42.63" y="41.34" width="100" height="100"/>
29        
30          <rect x="184.05" y="41.34" width="100" height="100"/>
31        
32        
33          <rect x="325.47" y="41.34" width="100" height="100"/>
34        
35        
36          <rect x="466.9" y="41.34" width="100" height="100"/>
37        
38        
39          <rect x="608.32" y="41.34" width="100" height="100"/>
40        
41        
42          <rect x="749.74" y="41.34" width="100" height="100"/>
43        
44        
45          <rect x="891.16" y="41.34" width="100" height="100"/>
46          <rect x="1032.58" y="41.34" width="100" height="100"/>
47        
48      </g>	
49		</g>
50	<g id="whiteBoxes" >
51 <g id="boxes2">
52        <rect x="-98.79" y="41.34" width="100" height="100"/>
53        <rect x="42.63" y="41.34" width="100" height="100"/>
54        
55          <rect x="184.05" y="41.34" width="100" height="100"/>
56        
57        
58          <rect x="325.47" y="41.34" width="100" height="100"/>
59        
60        
61          <rect x="466.9" y="41.34" width="100" height="100"/>
62        
63        
64          <rect x="608.32" y="41.34" width="100" height="100"/>
65        
66        
67          <rect x="749.74" y="41.34" width="100" height="100"/>
68        
69        
70          <rect x="891.16" y="41.34" width="100" height="100"/>
71        
72      </g>
73<g id="boxes3" transform="translate(0, 141.42)">
74        <rect x="42.63" y="41.34" width="100" height="100"/>
75        
76          <rect x="184.05" y="41.34" width="100" height="100"/>
77        
78        
79          <rect x="325.47" y="41.34" width="100" height="100"/>
80        
81        
82          <rect x="466.9" y="41.34" width="100" height="100"/>
83        
84        
85          <rect x="608.32" y="41.34" width="100" height="100"/>
86        
87        
88          <rect x="749.74" y="41.34" width="100" height="100"/>
89        
90        
91          <rect x="891.16" y="41.34" width="100" height="100"/>
92          <rect x="1032.58" y="41.34" width="100" height="100"/>
93        
94      </g>	
95		</g>
96	<rect id="bg" width="100%" height="100%" />
97	<clipPath id="mainMask">
98	<circle cx="400" cy="300" r="200" />
99		</clipPath>
100		
101	</defs>
102	<g clip-path="url(#mainMask)">
103	<use xlink:href="#bg" fill="#FFF" />
104		<g id="black">
105	<use xlink:href="#blackBoxes" />
106	<use xlink:href="#blackBoxes" y="282.84" />
107			</g>
108		<g id="white" opacity="0" fill="#FFF">
109	<use xlink:href="#whiteBoxes" x="-70.705" y="-70.705"/>
110	<use xlink:href="#whiteBoxes" x="-70.705" y="212.115" />
111			</g>
112		</g>
113	<circle cx="400" cy="300" r="200" fill="none" stroke="#000" stroke-width="5"/>
114</svg>
115