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

rendered animation

Loader with Gooey effect

1<div class="content">
2	<div>
3		<h1 class="title">
4			Loader with Gooey effect
5		</h1>
6		<div class="loader">
7			<div class="loader__item"></div>
8			<div class="loader__item"></div>
9			<div class="loader__item"></div>
10			<div class="loader__item"></div>
11			<div class="loader__item"></div>
12		</div>
13	</div>
14</div>
15
16<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
17  <defs>
18    <filter id="goo">
19      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
20      <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" />
21      <feBlend in="SourceGraphic" in2="goo" />
22  	</filter>
23  </defs>
24</svg>