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

rendered animation

Waves

1<div style="text-align: center;">
2  <h1>Waves</h1>
3  <h3>December challenge - Water</h3>
4</div>
5<svg class="sea" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px"
6	 height="400px" viewBox="0 0 800 350" style="enable-background:new 0 0 800 400;" xml:space="preserve">
7<style type="text/css">
8<![CDATA[
9	.st0{opacity:0.76;}
10	.st1{fill:url(#SVGID_1_);}
11	.st2{fill:url(#SVGID_2_);}
12	.st3{fill:url(#SVGID_3_);}
13	.st4{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-miterlimit:10;}
14]]>
15</style>
16<g id="Sky" class="sky">
17	<radialGradient id="SVGID_1_" cx="400" cy="202.5" r="317.3423" gradientUnits="userSpaceOnUse">
18		<stop  offset="0" style="stop-color:#E6DBFA"/>
19		<stop  offset="3.659654e-002" style="stop-color:#E5DCFA"/>
20		<stop  offset="0.5708" style="stop-color:#D5EBFE"/>
21		<stop  offset="1" style="stop-color:#D0F0FF"/>
22	</radialGradient>
23	<rect y="-1" class="st1" width="800" height="407"/>
24</g>
25<g id="DarkWaves" class="DarkWaves">
26	<g>
27		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="400.0005" y1="602" x2="400.0005" y2="202.3545">
28			<stop  offset="0" style="stop-color:#0000FF"/>
29			<stop  offset="0.1789" style="stop-color:#0020EC"/>
30			<stop  offset="0.4149" style="stop-color:#0043D7"/>
31			<stop  offset="0.6374" style="stop-color:#005CC8"/>
32			<stop  offset="0.8386" style="stop-color:#006CBF"/>
33			<stop  offset="1" style="stop-color:#0071BC"/>
34		</linearGradient>
35		<path class="st2" d="M761.8,202.4c-24.7,0-36.7,7.2-49.5,14.7c-13.2,7.8-26.8,15.9-53.8,15.9c-27,0-40.6-8.1-53.8-15.9
36			c-12.8-7.6-24.9-14.7-49.6-14.7c-24.7,0-36.8,7.2-49.6,14.7c-13.2,7.8-26.8,15.9-53.8,15.9c-27,0-40.7-8.1-53.8-15.9
37			c-12.8-7.6-24.9-14.7-49.6-14.7c-24.7,0-36.8,7.2-49.6,14.7c-13.2,7.8-26.8,15.9-53.8,15.9c-27,0-40.7-8.1-53.8-15.9
38			c-12.8-7.6-24.9-14.7-49.6-14.7c-24.7,0-36.8,7.2-49.6,14.7C78.7,224.9,65,232.9,38,232.9c-27,0-40.4-8.1-53.6-15.9
39			c-12.1-7.1-24.3-13.9-45.4-14.6V602h922V232.9c-22.6-0.8-37.2-8.4-49.7-15.8C798.5,209.5,786.5,202.4,761.8,202.4z"/>
40	</g>
41</g>
42<g id="LightWaves" class="LightWaves">
43	<g>
44		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="400.0005" y1="600" x2="400.0005" y2="214.3545">
45			<stop  offset="0" style="stop-color:#0000FF"/>
46			<stop  offset="0.1643" style="stop-color:#0B2CF7"/>
47			<stop  offset="0.3574" style="stop-color:#1559F0"/>
48			<stop  offset="0.5431" style="stop-color:#1E7DEA"/>
49			<stop  offset="0.7168" style="stop-color:#2496E6"/>
50			<stop  offset="0.874" style="stop-color:#28A6E3"/>
51			<stop  offset="1" style="stop-color:#29ABE2"/>
52		</linearGradient>
53		<path class="st3" d="M750.9,229.8c-14.8-7.9-28.7-15.4-57.2-15.4c-28.5,0-42.4,7.5-57.2,15.4c-15.2,8.2-30.9,16.6-62.1,16.6
54			s-46.9-8.4-62.1-16.6c-14.8-7.9-28.7-15.4-57.2-15.4c-28.5,0-42.4,7.5-57.2,15.4c-15.2,8.2-30.9,16.6-62.1,16.6
55			c-31.2,0-46.9-8.4-62.1-16.6c-14.8-7.9-28.7-15.4-57.2-15.4c-28.5,0-42.4,7.5-57.2,15.4c-15.2,8.2-30.9,16.6-62.1,16.6
56			c-31.2,0-46.9-8.4-62.1-16.6c-14.8-7.9-28.9-15.4-57.3-15.4c-16.9,0-28.8,2.6-38.8,6.4V600h922V237c-12,5.3-26,9.4-47.8,9.4
57			C782.1,246.4,766.1,237.9,750.9,229.8z"/>
58	</g>
59</g>
60<g id="WhiteWaves" class="WhiteWaves">
61	<g class="st0">
62		<path class="st4" d="M-71,220c94.2,0,94.2,18,188.4,18c94.2,0,94.2-18,188.4-18c94.2,0,94.2,18,188.4,18c94.2,0,94.2-18,188.4-18
63			s94.2,18,188.4,18"/>
64	</g>
65</g>
66</svg>
67