animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Spinners using Font Icons

model output

Qwen3-VL-8B-Instruct

Spinners using Font Icons

A 0.75T 0.34
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>Ring Animation</title>
7<style>
8  body {
9    margin: 0;
10    padding: 0;
11    background-color: black;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    height: 100vh;
16    overflow: hidden;
17  }
18  .ring {
19    width: 50px;
20    height: 50px;
21    border: 5px solid white;
22    border-radius: 50%;
23    position: relative;
24    animation: pulse 2s ease-in-out infinite alternate;
25  }
26  @keyframes pulse {
27    0% {
28      transform: scale(1) rotate(0deg);
29      box-shadow: 0 0 10px white;
30    }
31    100% {
32      transform: scale(1.1) rotate(360deg);
33      box-shadow: 0 0 20px white, 0 0 30px #ccc;
34    }
35  }
36</style>
37</head>
38<body>
39  <div class="ring"></div>
40</body>
41</html>