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

model output

Qwen3-VL-8B-Instruct

Worm cycle

A 0.50T 0.19
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>Animated C</title>
7<style>
8  body {
9    background-color: #f5f5f5;
10    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    margin: 0;
15  }
16  .c {
17    width: 50px;
18    height: 50px;
19    border-radius: 50%;
20    background: linear-gradient(90deg, #ff6b6b, #8e44ad);
21    position: relative;
22    animation: animateC 1.5s ease-in-out;
23  }
24  @keyframes animateC {
25    0% {
26      transform: rotate(0deg) scale(0.5);
27      background: linear-gradient(90deg, #ff6b6b, #8e44ad);
28    }
29    25% {
30      transform: rotate(180deg) scale(1.2);
31      background: linear-gradient(90deg, #8e44ad, #ff6b6b);
32    }
33    50% {
34      transform: rotate(360deg) scale(0.8);
35      background: linear-gradient(90deg, #ff6b6b, #8e44ad);
36    }
37    75% {
38      transform: rotate(540deg) scale(1.1);
39      background: linear-gradient(90deg, #8e44ad, #ff6b6b);
40    }
41    100% {
42      transform: rotate(720deg) scale(0.9);
43      background: linear-gradient(90deg, #ff6b6b, #8e44ad);
44    }
45  }
46</style>
47</head>
48<body>
49  <div class="c"></div>
50</body>
51</html>