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

rendered animation

SVG 777 Followers

1<div class="container">
2<svg class="labSVG" xmlns="http://www.w3.org/2000/svg"	 viewBox="0 0 600 600"	>
3<defs>
4		<path id="seven" d="M123,243.1c-4.2,0-7.9,1.7-11.1,5.1c-3.3,3.4-5.3,7.3-6.2,11.9l-0.8,3.9H74.2v-50.7h26.5v7.8c0,1.2,0.6,1.8,2,1.8
5		c1.6,0,6.8-1.7,15.8-5.1c7.9-3,14.5-4.5,19.7-4.5c5.9,0,13.8,1.8,23.8,5.3c10,3.5,16.6,5.3,19.9,5.3c6.9,0,11.4-3.5,13.7-10.5
6		l25.7,0.4v8.2c0,5.3-1.6,11.5-4.8,18.6c-3.2,7.1-6.8,12.4-10.8,16L183,276.7c-11.6,10.4-17.4,19.4-17.4,27c0,3.5,1.3,8.4,4,14.8
7		c2.7,6.4,4,10,4,10.9c0,9.1-3.8,16-11.5,20.8c-6.4,4-14.4,6-24,6c-9,0-16.8-2.1-23.4-6.2c-7.5-4.8-11.3-11.5-11.3-20.2
8		c0-9.1,1.2-16.8,3.7-23.1c5.6-14.3,13.5-24.7,23.8-31.5c0.8-0.5,8.3-4.4,22.4-11.7c5.2-2.7,8.1-4.7,8.8-5.8c1.6-1,2.3-2,2.3-2.9
9		c0-0.3-0.1-0.5-0.4-0.8c-0.3-0.3-0.9-0.7-2-1.4c-0.8,0-3.4-0.1-8-0.4c-9.9-0.5-17.9-2.9-24-6.9C128,243.8,125.6,243.1,123,243.1z"
10		/>  
11<linearGradient id="rainbowGrad" gradientUnits="userSpaceOnUse" x1="600" y1="329" x2="600" y2="693">
12	<stop  offset="0.1" style="stop-color:#F22100"/>
13	<stop  offset="0.2308" style="stop-color:#EBA600"/>
14	<stop  offset="0.4" style="stop-color:#B6BD00"/>
15	<stop  offset="0.6" style="stop-color:#1AAA00"/>
16	<stop  offset="0.7" style="stop-color:#009AB0"/>
17	<stop  offset="0.8" style="stop-color:#000889"/>
18	<stop  offset="0.9" style="stop-color:#9C0087"/>
19</linearGradient> 
20  <clipPath id="liquidMask">
21        <text class="thankyou" x="50%" y="32%" style="text-anchor:middle;" >THANK YOU!</text>
22    <text class="followers" x="50%" y="70%" >FOLLOWERS</text>
23	 <use xlink:href="#seven" x="0" y="-5" fill="red"/>
24 <use xlink:href="#seven" x="155" y="-5" fill="red"/>
25 <use xlink:href="#seven" x="310" y="-5" fill="red"/>
26
27  </clipPath>
28  <filter id="goo" color-interpolation-filters="sRGB">
29      <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
30      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -7" result="cm" />
31    
32        <feComposite in="SourceGraphic" in2="cm" />
33  	</filter>
34</defs>
35  
36  
37<g class="liquidMaskGroup" clip-path="url(#liquidMask)">
38  <path class="liquidBack" fill="none" d="M1199.9,365.1c-41.8,0-79.4,9.8-107.4,8.1c-38.9-2.3-54.5-16.4-83.6-19.9
39	c-29.1-3.5-71.5,3.4-110.4,1c-28-1.7-56.4-13.7-98.2-13.7c-41.8,0-70.2,12-98.2,13.7c-38.9,2.3-81.4-4.6-110.4-1
40	c-29.1,3.5-44.7,17.5-83.6,19.9c-28,1.7-65.7-8.2-107.5-8.2c-41.8,0-79.5,9.9-107.5,8.2c-38.9-2.3-54.5-16.3-83.6-19.9
41	c-29.1-3.5-72,3.4-110.9,1c-28-1.7-56.7-13.7-98.7-13.7V438h1200L1199.9,365.1z"/>
42  <g class="liquidBubblesGroup" fill="none">
43    <path class="liquidFront"  fill="url(#rainbowGrad)" d="M1199.9,329.6c-44,0-70.6,29.4-96.4,33c-36.1,5.1-70.7-14.5-106.8-9.4c-25.8,3.7-52.4,33.3-96.4,33.3
44	s-70.7-29.7-96.4-33.4c-36.1-5.1-70.7,14.4-106.8,9.2c-25.8-3.7-52.4-33.3-96.5-33.3c-44,0-70.7,29.7-96.5,33.3
45	c-36.1,5.1-70.7-14.4-106.8-9.3c-25.8,3.7-52.4,33.3-96.5,33.3c-44,0-70.7-29.7-96.5-33.3c-36.1-5.1-71.2,14.4-107.3,9.3
46	C71.2,358.6,45,329,0,329v364h1200L1199.9,329.6z"/>
47      <circle class="bubble0" cx="350" cy="400" r="8"/>
48      <circle class="bubble1" cx="320" cy="400" r="6"/> 
49      <circle class="bubble2" cx="300" cy="400" r="12"/>
50      <circle class="bubble3" cx="276" cy="400" r="3"/>     
51      <circle class="bubble4" cx="244" cy="400" r="4"/>  
52      <circle class="bubblePop0" cx="280" cy="400" r="5"/>  
53      <circle class="bubblePop1" cx="310" cy="390" r="5"/>        
54      <circle class="bubblePop2" cx="350" cy="410" r="5"/>        
55    </g>
56  <g class="darkBubbleGroup" fill="none" stroke="none"> 
57    <circle class="darkBubble" cx="110" cy="480" r="12"/>
58    <circle class="darkBubble" cx="260" cy="480" r="5"/> 
59    <circle class="darkBubble" cx="230" cy="480" r="6"/>  
60    <circle class="darkBubble" cx="345" cy="480" r="3"/> 
61    <circle class="darkBubble" cx="290" cy="480" r="8"/>  
62    <circle class="darkBubble" cx="142" cy="480" r="2"/>      
63    <circle class="darkBubble" cx="400" cy="480" r="9"/> 
64  </g>
65  <path class="pop" fill="none" stroke="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
66    M37.4,9c2.1-2.1,4.2-4.2,6.3-6.3 M2,44.4c2.2-2.2,4.5-4.5,6.7-6.7 M37.4,37.4c2.1,2.1,4.2,4.2,6.3,6.3 M2,2c2.2,2.2,4.5,4.5,6.7,6.7
67    "/>  
68  </g>
69  
70
71  
72</svg>
73
74  
75</div>
76