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

rendered animation

CSS rectangle inception spiral

1<!DOCTYPE html>
2<html>
3  <head>
4  </head>
5  <body>
6    <div class="pen">
7      <div class="big">
8        <div class="top top1 idx1 piece"></div>
9        <div class="top top2 idx2 piece"></div>
10        <div class="top top3 idx3 piece"></div>
11        <div class="top top4 idx4 piece"></div>
12
13        <div class="right right1 idx5 piece"></div>
14        <div class="right right2 idx6 piece"></div>
15        <div class="right right3 idx7 piece"></div>
16        <div class="right right4 idx8 piece"></div>
17      </div>
18      <div class="small">
19        <div class="bottom bottom1 idx9 piece"></div>
20        <div class="bottom bottom2 idx10 piece"></div>
21        <div class="bottom bottom3 idx11 piece"></div>
22        <div class="bottom bottom4 idx12 piece"></div>
23
24        <div class="left left1 idx13 piece"></div>
25        <div class="left left2 idx14 piece"></div>
26        <div class="left left3 idx15 piece"></div>
27        <div class="left left4 idx16 piece"></div>
28        <div class="dot"></div>
29      </div>
30      <div class="innerWrapper">
31        <div class="inner"></div>
32      </div>
33      <div class="fakeWrapper">
34        <div class="fake"></div>
35      </div>
36    </div>
37  </body>
38</html>