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

rendered animation

Gooey Scroll Arrow

1<div class="ico animated">
2  
3  <div class="circle circle-top"></div>  
4  <div class="circle circle-main"></div>
5  <div class="circle circle-bottom"></div>  
6  
7  <svg class="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve" >
8  <defs>
9    <clipPath id="cut-off-arrow">
10      <circle cx="306" cy="306" r="287"/>
11    </clipPath>
12    
13    <filter id="goo">
14      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
15      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
16      <feBlend in="SourceGraphic" in2="goo" />
17    </filter>
18   
19  </defs>
20    <path  class="st-arrow" d="M317.5,487.6c0.3-0.3,0.4-0.7,0.7-1.1l112.6-112.6c6.3-6.3,6.3-16.5,0-22.7c-6.3-6.3-16.5-6.3-22.7,0
21					l-86,86V136.1c0-8.9-7.3-16.2-16.2-16.2c-8.9,0-16.2,7.3-16.2,16.2v301.1l-86-86c-6.3-6.3-16.5-6.3-22.7,0
22					c-6.3,6.3-6.3,16.5,0,22.7l112.7,112.7c0.3,0.3,0.4,0.7,0.7,1c0.5,0.5,1.2,0.5,1.7,0.9c1.7,1.4,3.6,2.3,5.6,2.9
23					c0.8,0.2,1.5,0.4,2.3,0.4C308.8,492.6,313.8,491.3,317.5,487.6z"/>
24</svg>
25</div>