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

rendered animation

DeoxyriboNucleic Acid experiment

1<div class="svg">
2  <div class="strand a">
3    <div class="ball la"></div>
4    <div class="ball ra"></div>
5  </div>
6  <div class="strand b">
7    <div class="ball lb"></div>
8    <div class="ball rb"></div>
9  </div>
10  <div class="strand c">
11    <div class="ball lc"></div>
12    <div class="ball rc"></div>
13  </div>
14  <div class="strand d">
15    <div class="ball ld"></div>
16    <div class="ball rd"></div>
17  </div>
18  <div class="strand e">
19    <div class="ball le"></div>
20    <div class="ball re"></div>
21  </div>
22  <div class="strand f">
23    <div class="ball lf"></div>
24    <div class="ball rf"></div>
25  </div>
26  <div class="strand g">
27    <div class="ball lg"></div>
28    <div class="ball rg"></div>
29  </div>
30  <div class="strand h">
31    <div class="ball lh"></div>
32    <div class="ball rh"></div>
33  </div>
34</div>
35<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
36  <defs>
37    <filter id="goo">
38      <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
39      <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 -8" result="goo" />
40      <feComposite in="SourceGraphic" in2="goo" operator="atop" />
41    </filter>
42  </defs>
43</svg>