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

rendered animation

CSS Direction Animation

1<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 300">
2  <rect class="mouse" x="0" y="0" width="800" height="300"/>
3  <g class="star">
4    <polygon class="opa-01 pumpkin" points="400, 190, 340, 105, 400, 20, 460, 105"/>
5    <polygon class="opa-02 dandelion" points="474.2, 160.6, 371.7, 178.3, 389.4, 75.8, 491.9, 58.1"/>
6    <polygon class="opa-03 lime" points=" 360, 150, 445, 90, 530, 150, 445, 210"/>
7    <polygon class="opa-04 grass" points="371.7, 121.7, 474.2, 139.4, 491.9, 241.9, 389.4, 224.2"/>
8    <polygon class="opa-05 turquoise" points="400, 280, 340, 195, 400, 110, 460, 195"/>
9    <polygon class="opa-06 sapphire" points="410.6, 224.2, 308.1, 241.9, 325.8, 139.4, 428.3, 121.7"/>
10    <polygon class="opa-07 grape" points="355, 210, 270, 150, 355, 90, 440, 150"/>
11    <polygon class="opa-08 tulip" points="428.3, 178.3, 325.8, 160.6, 308.1, 58.1, 410.6, 75.8"/>
12  </g>
13</svg>