animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to 4 'counter rotation' effects

model output

Qwen3-VL-8B-Instruct

4 'counter rotation' effects

A 0.44T 0.10
compare with ground truth →
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Rotating Flower Animation</title>
7<style>
8  body {
9    background-color: #000;
10    margin: 0;
11    padding: 0;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    height: 100vh;
16  }
17  .flower {
18    position: relative;
19    width: 80px;
20    height: 80px;
21  }
22  .center {
23    position: absolute;
24    top: 50%;
25    left: 50%;
26    transform: translate(-50%, -50%);
27    width: 20px;
28    height: 20px;
29    background-color: white;
30    border-radius: 50%;
31    z-index: 10;
32  }
33  .petal {
34    position: absolute;
35    width: 20px;
36    height: 20px;
37    border-radius: 50%;
38    background-color: #d12a2a;
39    transform-origin: 50% 50%;
40    animation: rotate 2s linear infinite;
41  }
42  .petal:nth-child(1) {
43    top: 50%;
44    left: 50%;
45    transform: translate(-50%, -50%) rotate(0deg);
46  }
47  .petal:nth-child(2) {
48    top: 50%;
49    left: 50%;
50    transform: translate(-50%, -50%) rotate(45deg);
51  }
52  .petal:nth-child(3) {
53    top: 50%;
54    left: 50%;
55    transform: translate(-50%, -50%) rotate(90deg);
56  }
57  .petal:nth-child(4) {
58    top: 50%;
59    left: 50%;
60    transform: translate(-50%, -50%) rotate(135deg);
61  }
62  .petal:nth-child(5) {
63    top: 50%;
64    left: 50%;
65    transform: translate(-50%, -50%) rotate(180deg);
66  }
67  .petal:nth-child(6) {
68    top: 50%;
69    left: 50%;
70    transform: translate(-50%, -50%) rotate(225deg);
71  }
72  .petal:nth-child(7) {
73    top: 50%;
74    left: 50%;
75    transform: translate(-50%, -50%) rotate(270deg);
76  }
77  .petal:nth-child(8) {
78    top: 50%;
79    left: 50%;
80    transform: translate(-50%, -50%) rotate(315deg);
81  }
82  @keyframes rotate {
83    0% {
84      transform: translate(-50%, -50%) rotate(0deg);
85    }
86    100% {
87      transform: translate(-50%, -50%) rotate(360deg);
88    }
89  }
90</style>
91</head>
92<body>
93  <div class="flower">
94    <div class="center"></div>
95    <div class="petal"></div>
96    <div class="petal"></div>
97    <div class="petal"></div>
98    <div class="petal"></div>
99    <div class="petal"></div>
100    <div class="petal"></div>
101    <div class="petal"></div>
102  </div>
103</body>
104</html>