← back to Animated Concepts #3compare with ground truth →
model output
Qwen3-VL-8B-Instruct
Animated Concepts #3
A 0.51T 0.30
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>Animated X</title>
7<style>
8 body {
9 background-color: #121212;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .x {
17 position: relative;
18 width: 20px;
19 height: 20px;
20 background-color: #ff6b6b;
21 transform-origin: center;
22 animation: rotateAndShrink 2s ease-in-out infinite alternate;
23 }
24 .x::before, .x::after {
25 content: '';
26 position: absolute;
27 width: 2px;
28 height: 20px;
29 background-color: #ff6b6b;
30 top: 0;
31 left: 0;
32 }
33 .x::before {
34 transform: rotate(45deg);
35 }
36 .x::after {
37 transform: rotate(-45deg);
38 }
39 @keyframes rotateAndShrink {
40 0%, 100% {
41 transform: rotate(0deg) scale(1);
42 }
43 50% {
44 transform: rotate(180deg) scale(0.5);
45 }
46 }
47</style>
48</head>
49<body>
50 <div class="x"></div>
51</body>
52</html>