← back to Animated Concepts #3compare with ground truth →
model output
LLaMA 4 Scout
Animated Concepts #3
A 0.61T 0.27
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: #000;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .animation-container {
17 position: relative;
18 }
19 .dot {
20 position: absolute;
21 background-color: #FFC5C5; /* Light coral color */
22 border-radius: 50%;
23 transform: translate(-50%, -50%);
24 }
25 .center-dot {
26 animation: appear 2s forwards;
27 }
28 .surrounding-dots {
29 animation: appear-surrounding 2s 1s forwards;
30 }
31 @keyframes appear {
32 0% {
33 width: 20px;
34 height: 20px;
35 opacity: 0;
36 }
37 100% {
38 width: 20px;
39 height: 20px;
40 opacity: 1;
41 }
42 }
43 @keyframes appear-surrounding {
44 0% {
45 width: 10px;
46 height: 10px;
47 opacity: 0;
48 }
49 100% {
50 width: 10px;
51 height: 10px;
52 opacity: 1;
53 }
54 }
55 .dot:nth-child(1) {
56 top: 50%;
57 left: 40%;
58 animation: move-top-left 4s infinite;
59 }
60 .dot:nth-child(2) {
61 top: 40%;
62 left: 50%;
63 animation: move-top-right 4s infinite;
64 }
65 .dot:nth-child(3) {
66 top: 50%;
67 left: 60%;
68 animation: move-bottom-right 4s infinite;
69 }
70 .dot:nth-child(4) {
71 top: 60%;
72 left: 50%;
73 animation: move-bottom-left 4s infinite;
74 }
75 .dot:nth-child(5) {
76 top: 50%;
77 left: 50%;
78 }
79 @keyframes move-top-left {
80 0% {
81 transform: translate(-50%, -50%) translateX(0) translateY(0);
82 }
83 50% {
84 transform: translate(-50%, -50%) translateX(-20px) translateY(-20px);
85 }
86 100% {
87 transform: translate(-50%, -50%) translateX(0) translateY(0);
88 }
89 }
90 @keyframes move-top-right {
91 0% {
92 transform: translate(-50%, -50%) translateX(0) translateY(0);
93 }
94 50% {
95 transform: translate(-50%, -50%) translateX(20px) translateY(-20px);
96 }
97 100% {
98 transform: translate(-50%, -50%) translateX(0) translateY(0);
99 }
100 }
101 @keyframes move-bottom-right {
102 0% {
103 transform: translate(-50%, -50%) translateX(0) translateY(0);
104 }
105 50% {
106 transform: translate(-50%, -50%) translateX(20px) translateY(20px);
107 }
108 100% {
109 transform: translate(-50%, -50%) translateX(0) translateY(0);
110 }
111 }
112 @keyframes move-bottom-left {
113 0% {
114 transform: translate(-50%, -50%) translateX(0) translateY(0);
115 }
116 50% {
117 transform: translate(-50%, -50%) translateX(-20px) translateY(20px);
118 }
119 100% {
120 transform: translate(-50%, -50%) translateX(0) translateY(0);
121 }
122 }
123 </style>
124</head>
125<body>
126 <div class="animation-container">
127 <div class="dot center-dot" style="width: 20px; height: 20px; background-color: #FF69B4;"></div>
128 <div class="dot surrounding-dots" style="width: 10px; height: 10px; top: 50%; left: 40%;"></div>
129 <div class="dot surrounding-dots" style="width: 10px; height: 10px; top: 40%; left: 50%;"></div>
130 <div class="dot surrounding-dots" style="width: 10px; height: 10px; top: 50%; left: 60%;"></div>
131 <div class="dot surrounding-dots" style="width: 10px; height: 10px; top: 60%; left: 50%;"></div>
132 </div>
133</body>
134</html>