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

rendered animation

SVG Lava Lamp

1
2<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 600 600" >
3<defs>
4  <filter id="goo" color-interpolation-filters="sRGB">
5      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
6      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -9" result="cm" />
7      <feBlend/>
8
9  	</filter>
10
11  <clipPath id="glassMask">
12<path id="glassShape" d="M262,174h60l33.5,182.3c0,0,2.7,12.8,2.5,22.8c-7.5,0-131,0-131,0s-0.7-9.3,0-18
13	C227.6,352.9,262,174,262,174z"/>  
14  </clipPath>
15<radialGradient id="bgGrad" cx="300" cy="300" r="300" gradientUnits="userSpaceOnUse">
16	<stop  offset="7.142857e-002" style="stop-color:#471A19"/>
17	<stop  offset="0.3107" style="stop-color:#290F0E"/>
18	<stop  offset="0.553" style="stop-color:#120706"/>
19	<stop  offset="0.7828" style="stop-color:#050202"/>
20	<stop  offset="0.9847" style="stop-color:#000000"/>
21</radialGradient>
22  
23<radialGradient id="blob3Grad" cx="291.9382" cy="167.4587" r="41.0767" gradientUnits="userSpaceOnUse">
24	<stop  offset="1.020408e-002" style="stop-color:#FF9C12"/>
25	<stop  offset="0.1922" style="stop-color:#FA9712"/>
26	<stop  offset="0.3992" style="stop-color:#ED8A14"/>
27	<stop  offset="0.6186" style="stop-color:#D67316"/>
28	<stop  offset="0.8449" style="stop-color:#B65419"/>
29	<stop  offset="1" style="stop-color:#9C3A1C"/>
30</radialGradient>
31<radialGradient id="botBlob" cx="284.5" cy="421.5" r="53.521" gradientTransform="matrix(-2.802637e-002 -0.9996 5.9976 -0.1682 -2235.533 776.7669)" gradientUnits="userSpaceOnUse">
32	<stop  offset="1.020408e-002" style="stop-color:#FF9C12"/>
33	<stop  offset="0.1922" style="stop-color:#FA9712"/>
34	<stop  offset="0.3992" style="stop-color:#ED8A14"/>
35	<stop  offset="0.6186" style="stop-color:#D67316"/>
36	<stop  offset="0.8449" style="stop-color:#B65419"/>
37	<stop  offset="1" style="stop-color:#9C3A1C"/>
38</radialGradient>
39<radialGradient id="blob2_2_" cx="294" cy="157" r="23" gradientUnits="userSpaceOnUse">
40	<stop  offset="1.020408e-002" style="stop-color:#FF9C12"/>
41	<stop  offset="0.1922" style="stop-color:#FA9712"/>
42	<stop  offset="0.3992" style="stop-color:#ED8A14"/>
43	<stop  offset="0.6186" style="stop-color:#D67316"/>
44	<stop  offset="0.8449" style="stop-color:#B65419"/>
45	<stop  offset="1" style="stop-color:#9C3A1C"/>
46</radialGradient>
47<radialGradient id="blob1_2_" cx="297" cy="167.5" r="37.2156" gradientUnits="userSpaceOnUse">
48	<stop  offset="1.020408e-002" style="stop-color:#FF9C12"/>
49	<stop  offset="0.1922" style="stop-color:#FA9712"/>
50	<stop  offset="0.3992" style="stop-color:#ED8A14"/>
51	<stop  offset="0.6186" style="stop-color:#D67316"/>
52	<stop  offset="0.8449" style="stop-color:#B65419"/>
53	<stop  offset="1" style="stop-color:#9C3A1C"/>
54</radialGradient>
55<radialGradient id="blob0_2_" cx="292" cy="171.5" r="56.5354" gradientUnits="userSpaceOnUse">
56	<stop  offset="1.020408e-002" style="stop-color:#FF9C12"/>
57	<stop  offset="0.1922" style="stop-color:#FA9712"/>
58	<stop  offset="0.3992" style="stop-color:#ED8A14"/>
59	<stop  offset="0.6186" style="stop-color:#D67316"/>
60	<stop  offset="0.8449" style="stop-color:#B65419"/>
61	<stop  offset="1" style="stop-color:#9C3A1C"/>
62</radialGradient>
63<radialGradient id="blob4_2_" cx="306.5" cy="155" r="14.109" gradientUnits="userSpaceOnUse">
64	<stop  offset="1.020408e-002" style="stop-color:#FF9C12"/>
65	<stop  offset="0.1922" style="stop-color:#FA9712"/>
66	<stop  offset="0.3992" style="stop-color:#ED8A14"/>
67	<stop  offset="0.6186" style="stop-color:#D67316"/>
68	<stop  offset="0.8449" style="stop-color:#B65419"/>
69	<stop  offset="1" style="stop-color:#9C3A1C"/>
70</radialGradient>
71
72<linearGradient id="lampTop_2_" gradientUnits="userSpaceOnUse" x1="292" y1="135" x2="292" y2="174">
73	<stop  offset="1.530612e-002" style="stop-color:#000000"/>
74	<stop  offset="0.233" style="stop-color:#050202"/>
75	<stop  offset="0.4808" style="stop-color:#120706"/>
76	<stop  offset="0.7421" style="stop-color:#290F0E"/>
77	<stop  offset="1" style="stop-color:#471A19"/>
78</linearGradient>
79<linearGradient id="lampBot_2_" gradientUnits="userSpaceOnUse" x1="292.375" y1="439" x2="292.375" y2="379">
80	<stop  offset="5.102041e-003" style="stop-color:#000000"/>
81	<stop  offset="0.2251" style="stop-color:#050202"/>
82	<stop  offset="0.4754" style="stop-color:#120706"/>
83	<stop  offset="0.7394" style="stop-color:#290F0E"/>
84	<stop  offset="1" style="stop-color:#471A19"/>
85</linearGradient>
86  
87</defs>
88<rect fill="url(#bgGrad)" width="600" height="600"/>
89
90  <use xlink:href="#glassShape" fill="#EB7619" opacity="0.1"/>
91
92  <g class="blobGroup" filter="url(#goo)" clip-path="url(#glassMask)" >
93<path class="blob0 blob" fill="url(#blob0_2_)" d="M326.2,149.5c-5,19.2-21.4,29.2-37.8,26.6c-16.5-2.9-33.4-12.9-37.1-26.6
94	c-3.8-13.6,12.5-32.1,37.8-34.9C314.4,111.8,331.3,130.4,326.2,149.5z"/>
95<path class="blob1 blob" fill="url(#blob1_2_)" d="M320.5,146.4c-4.4,10.1-16.4,20.2-26.8,25.3c-10.4,5.2-22.4-2.9-26.8-15.2
96	c-4.4-11.6,7.6-20.4,26.8-25.3C312.9,126.3,324.9,135.6,320.5,146.4z"/>
97<path class="blob2 blob" fill="url(#blob2_2_)" d="M278,147.7c2.7-7.1,9.4-15.7,15.4-16.4c5.9-0.4,12.6,8.5,15.4,16.9
98	c2.7,8.4-4.2,14.9-15.4,14.2C282.2,161.5,275.3,154.8,278,147.7z"/>
99<path class="botBlob" fill="url(#botBlob)" d="M354,381.2c6.8,3.4,5.4,7.4-5.6,10.4c-10.7,3.1-31.1,5.1-54.4,8.4
100	c-23.3,3.3-43.7,0.8-54.4-2.4c-11-3.4-12.4-7.6-5.6-13.8c6.8-7,18.9-14.6,29.6-17.4c11-3.3,20.6-1.8,30.4-1.4
101	c9.8,0.4,19.4,5.1,30.4,8.3C335.1,376.8,347.2,378.6,354,381.2z"/>
102
103<path class="blob3 blob" fill="url(#blob3Grad)" d="M312.7,147.3c-2.1,16.4-15.3,27.2-23.2,25.3c-8.1-1.8-12.6-13-14.8-24.9
104	c-1.9-11.8,2.7-22.7,14.8-25.3C301.5,119.6,314.7,130.8,312.7,147.3z"  />
105<path class="blob4 blob" fill="url(#blob4_2_)" d="M317.8,147.4c-1,8.2-9.8,10.3-13.8,9.3c-4-0.9-6.5-3-7.6-8.9c-1-5.9,2.3-8.5,8.4-9.8
106	C310.8,136.6,318.8,139.1,317.8,147.4z"/>      
107  </g>
108  
109<polygon id="lampTop" fill="url(#lampTop_2_)" points="269,135 262,174 322,174 316,135 "/>  
110<path id="lampBot" fill="url(#lampBot_2_)" d="M226.8,379.5c2.6,42.8,23.9,54.2,28.3,59.8c3.3,5.4-10,30.8-10,30.8h95.5
111	c0,0-16.5-25-14.5-30.8s26-15.6,32-60.1C328,379.1,240.3,379.5,226.8,379.5z"/> 
112<rect y="470" width="600" height="130"/>
113  
114</svg>
115
116