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

rendered animation

SVG Drip Feeder

1<div id="container">
2<svg version="1.1"
3	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
4	 x="0px" y="0px" width="400" height="75%" viewBox="0 0 400 200" enable-background="new 0 0 400 200"
5	 xml:space="preserve">
6<defs>
7    <filter id="goo">
8      <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
9      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 17 -7" result="cm" />
10    
11        <feComposite in="SourceGraphic" in2="cm" >
12  	</filter>
13
14     
15</defs>
16<g filter="url(#goo)" style="fill:#FE5621">
17<ellipse id="source" cx="300" cy="0" rx="20" ry="20"/>
18<ellipse id="drop" cx="300" cy="90" rx="10" ry="10"/>
19<ellipse id="drop2"cx="250" cy="90" rx="10" ry="10"/>
20<ellipse id="drop3"cx="200" cy="90" rx="10" ry="10"/>
21<ellipse id="drop4"cx="150" cy="90" rx="10" ry="10"/>
22
23	</g>
24
25  <line x1=103 x2=320 y1=100 y2=100 stroke='#B5B5B5' stroke-width='1'/>
26  
27</svg>
28
29  </div>