← back to Spinners using Font Iconscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Spinners using Font Icons
A 0.75T 0.34
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>