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

rendered animation

Road Block

1<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" >
2<defs>
3  
4<filter id="edgeClean" color-interpolation-filters="sRGB">
5        <feComponentTransfer>
6          <feFuncA type="table" tableValues="0 .5 1 1" />
7        </feComponentTransfer>
8      </filter>    
9  
10  <filter id="soften" x="-100%" y="-100%" width="250%" height="250%">
11        <feGaussianBlur stdDeviation="1.3" result="coloredBlur" />
12        
13      </filter>    
14	<clipPath id="roadTopMask">
15		<polygon class="roadTopMask" fill="#FF4347" points="343.7,342.3 254.3,303.9 455.2,226.8 544.7,265.1 	"/>
16		
17	</clipPath>
18	<clipPath id="roadSideMask">
19		<polygon class="roadSideMask" fill="#FF495E" points="342.8,406.2 253.3,367.9 254.3,303.9 343.7,342.3 	"/>
20
21	</clipPath>
22</defs>
23<g id="wholeThing">
24  <rect width="100%" height="100%" fill="transparent"/>
25<g id="wholeRoad" >
26	<g id="roadBlock">
27		<polygon fill="#616161" points="343.7,406.2 254.3,367.9 254.3,303.9 343.7,342.3 		"/>
28		<polygon fill="#868686" points="343.7,342.3 254.3,303.9 455.2,226.8 544.7,265.1 		"/>
29		<polygon fill="#8F8F8F" points="544.7,265.1 544.7,324.7 343.7,406.2 343.7,342.3 		"/>
30	</g>
31  <g clip-path="url(#roadSideMask)">
32    <g id="roadMarkingSide" fill="#B5B5B5">
33      <polygon points="298.5,353.6 292.8,351.1 293.3,320.6 299,323.1 		"/>
34      <polygon points="298,404.1 292.3,401.6 292.8,371.1 298.5,373.6 		"/>
35      <polygon points="297.8,454.6 292.1,452.1 292.6,421.6 298.3,424.1 		"/>
36      <polygon points="163,375.3 157.3,372.9 191.3,359.8 197,362.2 	"/>    
37    </g>
38  </g>
39  
40	
41  <g clip-path="url(#roadTopMask)">
42    <g id="roadMarkingTop">
43      <polygon fill="#FFFFFF" points="299,323.1 293.3,320.6 327.3,307.6 333,310 		"/>
44      <polygon fill="#FFFFFF" points="367,297 361.3,294.5 395.3,281.5 401,283.9 		"/>
45      <polygon fill="#FFFFFF" points="231,349.2 225.3,346.7 259.3,333.7 265,336.1 		"/>
46      <polygon fill="#FFFFFF" points="435,270.9 429.3,268.4 463.3,255.4 469.1,257.8 		"/>
47    </g>
48  </g>
49</g>
50
51  
52<polygon id="hit" fill="transparent" points="455.3,226.8 254,303.9 254,367.9 343.7,406.2 545,324.7 545,265.1 "/>  
53  <g id="truckFlip">
54<use id="truckBg" xlink:href="#hit"/>     
55  <g id="truckSquash">  
56   
57<g id="truck" >
58 <g filter="url(#soften)" opacity="1"> 
59	    <polygon id="underShadow" fill="#666" points="372.2,286 352.8,277.7 386.8,265.7 403.5,274.2 	"/>
60  </g>  
61
62	<g>
63		<path fill="#666666" d="M402.3,272.9l-21-9c-0.1,0-0.1-0.1-0.1-0.2l21,9C402.3,272.8,402.3,272.9,402.3,272.9z"/>
64	</g>
65	<g>
66		<path fill="#9A3C5A" d="M402.3,272.7l-21-9c0-1.4-0.4-2.8-1.2-3.7l21,9C401.9,269.9,402.2,271.3,402.3,272.7z"/>
67	</g>
68	<g>
69		<path fill="#9A3C5A" d="M379.1,259.2l21,9c0.4,0.2,0.8,0.4,1.1,0.8l-21-9C379.9,259.6,379.5,259.4,379.1,259.2z"/>
70	</g>
71	<path fill="#9A3C5A" d="M384.2,279.6c0-1.8-0.6-3.4-1.9-4.3c-0.2-0.1-0.4-0.3-0.6-0.4c0,0-8.5-2.1-8.5-0.3c0,0.1,0,0.2,0.1,0.2
72		l11,5C384.3,279.8,384.2,279.7,384.2,279.6z"/>
73	<g>
74		<g id="wheelR">
75			<path fill="#24274D" d="M397.4,268.1c-0.5-0.2-1.1-0.2-1.7,0c-1.8,0.7-3.3,3.1-3.3,5.4c0,1.5,0.6,2.5,1.5,2.9l2.1,0.9
76				c-0.9-0.4-1.5-1.4-1.5-2.9c0-2.3,1.5-4.7,3.3-5.4c0.6-0.2,1.2-0.2,1.7,0L397.4,268.1z"/>
77			<g>
78				<path fill="#544D72" d="M397.8,269c1.8-0.7,3.2,0.6,3.2,2.9c0,2.3-1.5,4.7-3.3,5.4c-1.8,0.7-3.2-0.6-3.2-2.9
79					S396,269.7,397.8,269z"/>
80			</g>
81			<g>
82				<path fill="#E6E6E6" d="M397.7,271.9c0.6-0.2,1,0.2,1,0.9c0,0.7-0.5,1.5-1,1.7s-1-0.2-1-0.9
83					C396.7,272.8,397.1,272.1,397.7,271.9z"/>
84			</g>
85		</g>
86		<g id="wheelL">
87			<path fill="#24274D" d="M378.4,276.1c-0.5-0.2-1.1-0.2-1.7,0c-1.8,0.7-3.3,3.1-3.3,5.4c0,1.5,0.6,2.5,1.5,2.9l2.1,0.9
88				c-0.9-0.4-1.5-1.4-1.5-2.9c0-2.3,1.5-4.7,3.3-5.4c0.6-0.2,1.2-0.2,1.7,0L378.4,276.1z"/>
89			<g>
90				<path fill="#544D72" d="M378.8,277c1.8-0.7,3.2,0.6,3.2,2.9c0,2.3-1.5,4.7-3.3,5.4c-1.8,0.7-3.2-0.6-3.2-2.9
91					S377,277.7,378.8,277z"/>
92			</g>
93			<g>
94				<path fill="#E6E6E6" d="M378.7,279.9c0.6-0.2,1,0.2,1,0.9c0,0.7-0.5,1.5-1,1.7s-1-0.2-1-0.9
95					C377.7,280.8,378.1,280.1,378.7,279.9z"/>
96			</g>
97		</g>
98	</g>
99	<polygon fill="#9A3C5A" points="386.8,278.9 365.8,269.9 366.3,239.8 387.2,248.8 	"/>
100	<polygon fill="#FF8585" points="387.2,248.8 366.3,239.8 384.1,232.9 405.1,241.9 	"/>
101	<path fill="#DA566B" d="M404.7,271.7c0,0.2,0.2,0.3,0,0.4l-2.2,0.8c-0.1,0.1-0.2,0-0.2-0.2c0-1.4-0.4-2.8-1.2-3.7
102		c-1-1.1-2.7-1.4-4.4-0.7c-0.6,0.2-1.3,0.6-1.8,1.1c-2.2,1.9-3.4,4.9-3.5,7.5c0,0.2-0.1,0.3-0.2,0.4l-4.4,1.7l0.5-30.2l17.9-6.9
103		L404.7,271.7z"/>
104	<polygon fill="#F2F2F2" points="403,263.6 389.4,269.1 389.7,252.1 403.2,247 	"/>
105	<g>
106		<polygon fill="#FFFFFF" points="382.6,270.5 361.7,261.5 361.8,253.3 382.8,262.3 		"/>
107	</g>
108	<g>
109		<path fill="#FF7D7D" d="M383.1,259.4l-21-9c0.1,0,0.4-0.3,0.4-0.4l21,9C383.5,259.1,383.2,259.4,383.1,259.4z"/>
110	</g>
111	<g>
112		<polygon fill="#FFFFFF" points="373.7,273.9 352.8,264.9 361.7,261.5 382.6,270.5 		"/>
113	</g>
114	<polygon fill="#9A3C5A" points="383.5,259 362.6,250 362.7,241.1 383.7,250.1 	"/>
115	<polygon fill="#FF8585" points="383.7,250.1 362.7,241.1 364.8,240.3 385.8,249.3 	"/>
116	<polygon fill="#FF7D7D" points="378.8,261.1 357.8,252.1 362.2,250.4 383.1,259.4 	"/>
117	<g>
118		<path fill="#FF8585" d="M378.5,261.3l-21-9c0.1-0.1,0.1-0.2,0.3-0.2l21,9C378.6,261.1,378.6,261.2,378.5,261.3z"/>
119	</g>
120	<g>
121		<polygon fill="#FF8585" points="371.5,274.2 350.6,265.2 357.5,252.3 378.5,261.3 		"/>
122	</g>
123	<path fill="#9A3C5A" d="M371,284.6l0.2-9.9l-21-9l-0.2,9.9c0,0.1,0,0.1,0.1,0.1l21,9C371.1,284.7,371,284.7,371,284.6z"/>
124	<path fill="#DA566B" d="M383.5,259l0.1-8.9l2.1-0.8l-0.5,30.2l-0.9,0.3c-0.1,0.1-0.2,0-0.2-0.2c0-1.8-0.6-3.4-1.9-4.3
125		c-1-0.7-2.2-0.8-3.5-0.3c-0.8,0.3-1.7,0.9-2.5,1.7c-1.9,2-3,4.7-3.1,7.1c0,0.2-0.1,0.3-0.2,0.4l-1.5,0.6c-0.1,0.1-0.5,0-0.5-0.2
126		l0.2-9.9c0-0.2,0.3-0.4,0.3-0.6l6.9-12.8c0.1-0.1,0.1-0.2,0.3-0.2l4.4-1.7C383.2,259.4,383.5,259.1,383.5,259z"/>
127	<g>
128		<path fill="#FF8585" d="M371.2,274.7l-21-9c0-0.2,0.3-0.4,0.3-0.6l21,9C371.5,274.3,371.2,274.5,371.2,274.7z"/>
129	</g>
130	<g id="windows_3_">
131		<polygon fill="#95C1DE" points="370.5,272.6 352.6,264.9 358.5,253.9 376.5,261.6 		"/>
132		<polyline fill="#95C1DE" points="382.6,270.5 382.8,262.3 379.3,263.6 373.7,273.9 382.6,270.5 		"/>
133	</g>
134	<g id="frontGrill">
135		<ellipse fill="#F2F2F2" cx="353.3" cy="272.5" rx="1.5" ry="2"/>
136		<ellipse fill="#F2F2F2" cx="367.3" cy="278.9" rx="1.5" ry="2"/>
137		<path fill="#F2F2F2" d="M363.9,278.9l0-3.1c0-0.1,0-0.1-0.1-0.1l-6.9-3c-0.1,0-0.2,0-0.2,0.1v3.1c0,0.1,0,0.1,0.1,0.1l6.9,2.9
138			C363.8,279,363.9,279,363.9,278.9z"/>
139	</g>
140	<g id="windows_2_" opacity="0.79">
141		<polygon fill="#285396" points="376.5,261.6 376.3,262 358.7,254.5 353,265.1 352.6,264.9 358.5,253.9 		"/>
142		<polygon fill="#285396" points="382.8,262.3 382.8,263 379.5,264.2 374.4,273.7 373.7,273.9 379.3,263.6 		"/>
143	</g>
144</g>
145  </g>
146  </g>
147  </g>
148</svg>