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

rendered animation

Motion Table - Offset

1<div class="flex flex-col items-center space-y-12">
2  <div class="text-6xl text-white">Offset</div>
3  <div class="flex space-x-12">
4    <svg width="6rem" viewBox="0 0 75.448 87.12" xmlns="http://www.w3.org/2000/svg" class="offset">
5      <path
6        d="M37.725 82.233L4.234 62.897V24.225L37.725 4.889l33.491 19.336v38.672z"
7        fill="none"
8        stroke="#fff"
9        stroke-width="8.467"
10      />
11    </svg>
12    <div class="relative w-24 flex items-center justify-center">
13      <svg
14        width="6rem"
15        viewBox="0 0 68.04 78.566"
16        xmlns="http://www.w3.org/2000/svg"
17        class="absolute offset-2"
18        style="animation-delay: 0.8s"
19      >
20        <path
21          d="M34.021 77.96L.53 58.624V19.952L34.021.616l33.491 19.336v38.672z"
22          fill="none"
23          stroke="#fff"
24          stroke-width="1.058"
25        />
26      </svg>
27      <svg
28        width="5rem"
29        viewBox="0 0 68.04 78.566"
30        xmlns="http://www.w3.org/2000/svg"
31        class="absolute fill-green scale-in-center"
32      >
33        <path d="M34.021 77.96L.53 58.624V19.952L34.021.616l33.491 19.336v38.672z" stroke="none" stroke-width="1.058" />
34      </svg>
35      <svg
36        width="5rem"
37        viewBox="0 0 68.04 78.566"
38        xmlns="http://www.w3.org/2000/svg"
39        class="absolute scale-in-center"
40        style="animation-delay: 0.4s"
41      >
42        <path
43          d="M34.021 77.96L.53 58.624V19.952L34.021.616l33.491 19.336v38.672z"
44          fill="none"
45          stroke="white"
46          stroke-width="1.058"
47        />
48      </svg>
49      <span class="relative text-white text-lg font-bold staggered-scale-in">HTML</span>
50    </div>
51    <div class="relative w-24 flex items-center justify-center">
52      <svg
53        width="6rem"
54        viewBox="0 0 68.04 78.566"
55        xmlns="http://www.w3.org/2000/svg"
56        class="absolute offset-2"
57        style="animation-delay: 0.8s"
58      >
59        <path
60          d="M34.021 77.96L.53 58.624V19.952L34.021.616l33.491 19.336v38.672z"
61          fill="none"
62          stroke="#fff"
63          stroke-width="1.058"
64        />
65      </svg>
66      <svg
67        width="5rem"
68        viewBox="0 0 68.04 78.566"
69        xmlns="http://www.w3.org/2000/svg"
70        class="absolute fill-green scale-in-center"
71      >
72        <path d="M34.021 77.96L.53 58.624V19.952L34.021.616l33.491 19.336v38.672z" stroke="none" stroke-width="1.058" />
73      </svg>
74      <svg
75        width="5rem"
76        viewBox="0 0 68.04 78.566"
77        xmlns="http://www.w3.org/2000/svg"
78        class="absolute scale-in-center"
79        style="animation-delay: 0.4s"
80      >
81        <path
82          d="M34.021 77.96L.53 58.624V19.952L34.021.616l33.491 19.336v38.672z"
83          fill="none"
84          stroke="white"
85          stroke-width="1.058"
86        />
87      </svg>
88      <span class="relative text-white text-lg font-bold staggered-scale-in">CSS</span>
89    </div>
90    <div class="relative w-24 flex items-center justify-center">
91      <svg
92        width="6rem"
93        viewBox="0 0 68.04 78.566"
94        xmlns="http://www.w3.org/2000/svg"
95        class="absolute offset-2"
96        style="animation-delay: 0.8s"
97      >
98        <path
99          d="M34.021 77.96L.53 58.624V19.952L34.021.616l33.491 19.336v38.672z"
100          fill="none"
101          stroke="#fff"
102          stroke-width="1.058"
103        />
104      </svg>
105      <svg
106        width="5rem"
107        viewBox="0 0 68.04 78.566"
108        xmlns="http://www.w3.org/2000/svg"
109        class="absolute fill-green scale-in-center"
110      >
111        <path d="M34.021 77.96L.53 58.624V19.952L34.021.616l33.491 19.336v38.672z" stroke="none" stroke-width="1.058" />
112      </svg>
113      <svg
114        width="5rem"
115        viewBox="0 0 68.04 78.566"
116        xmlns="http://www.w3.org/2000/svg"
117        class="absolute scale-in-center"
118        style="animation-delay: 0.4s"
119      >
120        <path
121          d="M34.021 77.96L.53 58.624V19.952L34.021.616l33.491 19.336v38.672z"
122          fill="none"
123          stroke="white"
124          stroke-width="1.058"
125        />
126      </svg>
127      <span class="relative text-white text-lg font-bold staggered-scale-in">JS</span>
128    </div>
129  </div>
130</div>
131