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

rendered animation

SVG Paper Shredder

1<div class="container">
2  <svg version="1.1" x="0px" y="0px" viewBox="0 0 600 600">
3    <defs>
4      <clipPath id="pageClipPath" clipPathUnits="userSpaceOnUse">
5        <rect class="pageMask" width="210" height="280" x="200" y="0" fill="red" />
6      </clipPath>
7      <clipPath id="stripsClipPath" clipPathUnits="userSpaceOnUse">
8        <rect class="stripsMask" width="400" height="280" x="100" y="342" fill="red" />
9      </clipPath>
10    </defs>
11
12 
13    <g class="shredderGroup">
14
15      <rect x="125" y="281" fill="#003A72" width="350" height="98" />
16      <circle class="lightBlink" fill="#65BF6B" cx="183" cy="308" r="8" />
17      <circle fill="#FFFFFF" cx="157" cy="308" r="8" />
18      <rect x="149" y="342.3" fill="#638EB3" width="301.3" height="12" />
19
20    </g>
21    <g class="pageGroup" clip-path="url(#pageClipPath)">
22
23      <rect x="206" y="24" fill="#FFFFFF" width="201.3" height="210" />
24      <g>
25        <g>
26          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,79c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
27					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
28					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
29					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
30					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2
31					c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" />
32        </g>
33        <g>
34          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,91c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
35					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
36					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
37					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
38					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2
39					c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" />
40        </g>
41        <g>
42          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,103c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
43					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
44					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
45					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
46					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2
47					c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" />
48        </g>
49        <g>
50          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,115c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
51					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
52					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
53					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
54					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2
55					c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" />
56        </g>
57        <g>
58          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,127c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
59					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
60					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
61					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
62					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2
63					c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" />
64        </g>
65        <g>
66          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,139c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
67					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
68					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
69					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
70					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2
71					c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" />
72        </g>
73        <g>
74          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,151c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
75					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
76					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
77					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
78					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2
79					c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" />
80        </g>
81        <g>
82          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,163c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
83					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
84					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
85					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
86					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2
87					c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" />
88        </g>
89        <g>
90          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,175c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
91					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
92					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
93					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2
94					c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2
95					c1.9,0,1.9-2,3.8-2c1.9,0,1.9,2,3.8,2c1.9,0,1.9-2,3.8-2s1.9,2,3.8,2" />
96        </g>
97      </g>
98      <g>
99        <path fill="none" stroke="#BF6C65" stroke-width="2" stroke-miterlimit="10" d="M307,211c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2
100				c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2" />
101      </g>
102      <g>
103        <path fill="none" stroke="#BF6C65" stroke-width="2" stroke-miterlimit="10" d="M307,223c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2
104				c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2c2.5,0,2.5,2,5,2c2.5,0,2.5-2,5-2" />
105      </g>
106      <rect x="229.3" y="37.7" fill="#BF6C65" width="69.3" height="6.7" />
107      <g>
108        <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M229,60c2.4,0,2.4,2,4.8,2c2.4,0,2.4-2,4.8-2
109				s2.4,2,4.8,2c2.4,0,2.4-2,4.8-2c2.4,0,2.4,2,4.8,2c2.4,0,2.4-2,4.8-2c2.4,0,2.4,2,4.8,2c2.4,0,2.4-2,4.8-2c2.4,0,2.4,2,4.8,2" />
110      </g>
111      <g>
112        <g>
113          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,91c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
114					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
115					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" />
116        </g>
117        <g>
118          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,103c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
119					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
120					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" />
121        </g>
122        <g>
123          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,79c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
124					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
125					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" />
126        </g>
127        <g>
128          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,115c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
129					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
130					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" />
131        </g>
132        <g>
133          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,127c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
134					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
135					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" />
136        </g>
137        <g>
138          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,139c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
139					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
140					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" />
141        </g>
142        <g>
143          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,151c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
144					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
145					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" />
146        </g>
147        <g>
148          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,163c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
149					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
150					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" />
151        </g>
152        <g>
153          <path fill="none" stroke="#F4D455" stroke-width="2" stroke-miterlimit="10" d="M368,175c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
154					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2
155					c1.2,0,1.2,2,2.4,2c1.2,0,1.2-2,2.4-2c1.2,0,1.2,2,2.4,2" />
156        </g>
157      </g>
158
159    </g>
160    <g class="stripGroup" clip-path="url(#stripsClipPath)">
161      <path class="strip left" fill="none" stroke="#FFFFFF" stroke-width="16" stroke-miterlimit="10" d="M214,360c0,0,0,126.7,0,138 c0,36.3,0,72,0,72" />
162      <g class="strip">
163        <rect x="236.9" y="360" fill="#FFFFFD" width="16" height="210" />
164        <rect x="236.9" y="448.5" fill="#BF6C65" width="16" height="32.7" />
165      </g>
166      <g class="strip">
167        <rect x="267.8" y="360" fill="#FFFFFD" width="16" height="210" />
168        <rect x="267.8" y="493" fill="#EFCB29" width="16" height="24.1" />
169      </g>
170      <g class="strip">
171        <rect x="298.7" y="360" fill="#FFFFFD" width="16" height="210" />
172      </g>
173      <g class="strip">
174        <rect x="329.6" y="360" fill="#FFFFFD" width="16" height="210" />
175        <rect x="329.6" y="413.5" fill="#BF6C65" width="16" height="24.1" />
176      </g>
177      <g class="strip">
178        <rect x="360.4" y="360" fill="#FFFFFD" width="16" height="210" />
179        <rect x="360.4" y="465" fill="#EFCB29" width="16" height="12.1" />
180      </g>
181      <path class="strip right" fill="none" stroke="#FFFFFF" stroke-width="16" stroke-miterlimit="10" d="M399,360c0,0,0,132.7,0,144	c0,30.3,0,66,0,66" />
182    </g>
183  </svg>
184  <div class="null-object"></div>
185</div>