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

rendered animation

SVG Message In A Bottle

1
2<svg 
3	 xmlns="http://www.w3.org/2000/svg"	  viewBox="0 0 600 600" >
4<defs>
5  <clipPath id="bottleMask">
6<path class="bottleMask" fill="#FFFFFF" d="M0,0v254.5v1v39c72,0,107,10.7,144.1,22.1c38.3,11.7,77.9,23.9,155.9,23.9
7	c78,0,117.6-12.1,155.9-23.9C493,305.2,528,294.5,600,294.5c72,0,107,10.7,144.1,22.1c38.3,11.7,77.9,23.9,155.9,23.9
8	s117.6-12.1,155.9-23.9c37.1-11.4,72.1-22.1,144.1-22.1v-39v-1V0H0z"/>
9  </clipPath>
10  <clipPath id="mainMask">
11    <rect width="600" height="600"/>
12    </clipPath>
13</defs>
14<g clip-path="url(#mainMask)">
15<path class="waveBot" fill="none" stroke="#7ECEFD" stroke-width="40" stroke-miterlimit="10" d="M0,519c150,0,150,46,300,46
16	c150,0,150-46,300-46c150,0,150,46,300,46s150-46,300-46"/>
17<path class="waveMid" fill="none" stroke="#7ECEFD" stroke-width="40" stroke-miterlimit="10" d="M0,437c150,0,150,46,300,46
18	c150,0,150-46,300-46c150,0,150,46,300,46s150-46,300-46"/>
19<path class="waveTop" fill="none" stroke="#7ECEFD" stroke-width="40" stroke-miterlimit="10" d="M0,355c150,0,150,46,300,46
20	c150,0,150-46,300-46c150,0,150,46,300,46s150-46,300-46"/>
21  </g>
22<g clip-path="url(#bottleMask)">
23<g class="bottle">
24	<path fill="none" d="M244,308v137.4c40-4.8,80-4.8,120,0V308C324,303.2,284,303.2,244,308z"/>
25	<path fill="#7ECEFD" d="M318.2,38c0.9-9,1.9-17.2,2.8-25.6c-11.4-3.3-23-3.1-34.4,0.4c1.1,8.3,2.1,16.3,3.2,25.3H318.2z"/>
26	<path fill="#7ECEFD" d="M382,529V360.5c0-65.5-20.7-106.1-20.7-106c-27.3-54.3-31.7-111.1-31.7-111.3c-0.9-24.6-1.9-49.1-2.8-73.7
27		c0-4.8,3.2-6.1,3.2-6.1V46.8c-1-0.8-1.8-1.8-2.9-2.8h-45.9c-1.1,1-2.2,2-3.2,2.8v16.6c0,0,3.3,1.3,3.3,6.1
28		c-0.9,24.6-1.8,49.1-2.6,73.7c0,0.2-4.4,57-31.7,111.3c0-0.1-20.9,40.4-20.9,106V529c0,0-0.1,15.8,13.5,17.6c0,0.4,18.3,1.5,64.7,1
29		c46.4,0.5,64.5-0.6,64.5-1C382.3,544.8,382,529,382,529z M364,445.4c-40-4.8-80-4.8-120,0V308c40-4.8,80-4.8,120,0V445.4z"/>
30</g>
31  </g>
32
33</svg>
34