← back to CSS Direction Animationcompare with ground truth →
model output
Qwen3-VL-8B-Instruct
CSS Direction Animation
A 0.46T 0.48
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>Colorful Star Animation</title>
7 <style>
8 body {
9 margin: 0;
10 padding: 0;
11 display: flex;
12 justify-content: center;
13 align-items: center;
14 height: 100vh;
15 background: #f0f0f0;
16 overflow: hidden;
17 }
18 .star-container {
19 position: relative;
20 width: 200px;
21 height: 200px;
22 }
23 .star {
24 position: absolute;
25 width: 100px;
26 height: 100px;
27 background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff6b6b);
28 clip-path: polygon(50% 0%, 61% 35%, 98% 48%, 68% 93%, 50% 100%, 32% 93%, 8% 48%, 39% 35%);
29 transform-origin: center;
30 animation: rotate 6s linear infinite;
31 }
32 .star:nth-child(1) {
33 animation-delay: 0s;
34 transform: rotate(0deg);
35 }
36 .star:nth-child(2) {
37 animation-delay: 0.2s;
38 transform: rotate(45deg);
39 }
40 .star:nth-child(3) {
41 animation-delay: 0.4s;
42 transform: rotate(90deg);
43 }
44 .star:nth-child(4) {
45 animation-delay: 0.6s;
46 transform: rotate(135deg);
47 }
48 .star:nth-child(5) {
49 animation-delay: 0.8s;
50 transform: rotate(180deg);
51 }
52 .star:nth-child(6) {
53 animation-delay: 1.0s;
54 transform: rotate(225deg);
55 }
56 .star:nth-child(7) {
57 animation-delay: 1.2s;
58 transform: rotate(270deg);
59 }
60 .star:nth-child(8) {
61 animation-delay: 1.4s;
62 transform: rotate(315deg);
63 }
64 @keyframes rotate {
65 0% {
66 transform: rotate(0deg) scale(1);
67 }
68 25% {
69 transform: rotate(45deg) scale(1.1);
70 }
71 50% {
72 transform: rotate(90deg) scale(1);
73 }
74 75% {
75 transform: rotate(135deg) scale(0.9);
76 }
77 100% {
78 transform: rotate(360deg) scale(1);
79 }
80 }
81 </style>
82</head>
83<body>
84 <div class="star-container">
85 <div class="star"></div>
86 <div class="star"></div>
87 <div class="star"></div>
88 <div class="star"></div>
89 <div class="star"></div>
90 <div class="star"></div>
91 <div class="star"></div>
92 <div class="star"></div>
93 </div>
94</body>
95</html>