← back to SVG Loading iconscompare with ground truth →
model output
LLaMA 4 Scout
SVG Loading icons
A 0.67T 0.19
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>Animation</title>
7 <style>
8 body {
9 background-color: #333;
10 margin: 0;
11 display: flex;
12 justify-content: center;
13 align-items: center;
14 height: 100vh;
15 overflow: hidden;
16 }
17 .dot {
18 position: relative;
19 width: 10px;
20 height: 10px;
21 background-color: orange;
22 border-radius: 50%;
23 animation: move 8s infinite;
24 }
25 @keyframes move {
26 0% {
27 transform: translateY(0) translateX(0);
28 }
29 50% {
30 transform: translateY(-20px) translateX(0);
31 }
32 100% {
33 transform: translateY(0) translateX(0);
34 }
35 }
36 .dot:nth-child(1) {
37 animation-delay: 0s;
38 }
39 .dot:nth-child(2) {
40 animation-delay: 0.2s;
41 }
42 .dot:nth-child(3) {
43 animation-delay: 0.4s;
44 }
45 </style>
46</head>
47<body>
48 <div class="dot"></div>
49 <div class="dot"></div>
50 <div class="dot"></div>
51</body>
52</html>