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

model output

Qwen3-VL-8B-Instruct

Nice spinny stuff

A 0.66T 0.26
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>Pulsating Heart</title>
7<style>
8  body {
9    margin: 0;
10    padding: 0;
11    background-color: white;
12    overflow: hidden;
13    display: flex;
14    justify-content: center;
15    align-items: center;
16    height: 100vh;
17  }
18  .heart {
19    position: absolute;
20    width: 20px;
21    height: 20px;
22    background: pink;
23    border-radius: 50%;
24    animation: pulse 1.5s ease-in-out infinite alternate;
25    transform: translate(-50%, -50%);
26  }
27  @keyframes pulse {
28    0% {
29      transform: translate(-50%, -50%) scale(0.8);
30      opacity: 0.6;
31    }
32    100% {
33      transform: translate(-50%, -50%) scale(1.2);
34      opacity: 1;
35    }
36  }
37</style>
38</head>
39<body>
40  <div class="heart"></div>
41
42  <script>
43    const heart = document.querySelector('.heart');
44    heart.style.left = '10px';
45    heart.style.top = '10px';
46  </script>
47</body>
48</html>