← back to Motion Table - Orbitcompare with ground truth →
model output
Gemini 3 Flash Preview
Motion Table - Orbit
A 0.77T 0.31
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>Radar Animation Recreated</title>
7 <style>
8 :root {
9 --bg-color: #444342;
10 --line-white: rgba(255, 255, 255, 0.4);
11 --line-white-dim: rgba(255, 255, 255, 0.15);
12 --accent-brown: #a68b77;
13 --accent-blue: rgba(127, 161, 178, 0.4);
14 --anim-speed: 3s;
15 }
16
17 body, html {
18 margin: 0;
19 padding: 0;
20 width: 100%;
21 height: 100%;
22 display: flex;
23 justify-content: center;
24 align-items: center;
25 background-color: var(--bg-color);
26 overflow: hidden;
27 }
28
29 .radar-container {
30 position: relative;
31 width: 300px;
32 height: 300px;
33 display: flex;
34 justify-content: center;
35 align-items: center;
36 }
37
38 svg {
39 width: 100%;
40 height: 100%;
41 }
42
43 /* --- Crosshairs --- */
44 .crosshair {
45 stroke: var(--line-white);
46 stroke-width: 1;
47 stroke-dasharray: 2 3;
48 }
49
50 /* --- Circles --- */
51 .circle-static {
52 fill: none;
53 stroke: var(--line-white);
54 stroke-width: 1;
55 }
56
57 .circle-dashed {
58 fill: none;
59 stroke: var(--line-white-dim);
60 stroke-width: 1;
61 stroke-dasharray: 1 4;
62 }
63
64 /* --- Rotating elements --- */
65 .rotating-group {
66 transform-origin: center;
67 animation: rotate-cw var(--anim-speed) linear infinite;
68 }
69
70 .rotating-group-slow {
71 transform-origin: center;
72 animation: rotate-cw calc(var(--anim-speed) * 2.5) linear infinite;
73 }
74
75 .rotating-group-ccw {
76 transform-origin: center;
77 animation: rotate-ccw calc(var(--anim-speed) * 1.5) linear infinite;
78 }
79
80 /* --- Pulse Effect --- */
81 .pulse {
82 fill: var(--accent-blue);
83 transform-origin: center;
84 opacity: 0;
85 animation: pulse-anim calc(var(--anim-speed)) ease-out infinite;
86 }
87
88 .dot {
89 fill: var(--accent-brown);
90 }
91
92 .orbit-line {
93 fill: none;
94 stroke: var(--line-white-dim);
95 stroke-width: 0.5;
96 }
97
98 /* --- Keyframes --- */
99 @keyframes rotate-cw {
100 from { transform: rotate(0deg); }
101 to { transform: rotate(360deg); }
102 }
103
104 @keyframes rotate-ccw {
105 from { transform: rotate(360deg); }
106 to { transform: rotate(0deg); }
107 }
108
109 @keyframes pulse-anim {
110 0% {
111 transform: scale(0.2);
112 opacity: 0;
113 }
114 20% {
115 opacity: 1;
116 }
117 50% {
118 transform: scale(1.2);
119 opacity: 0;
120 }
121 100% {
122 opacity: 0;
123 }
124 }
125
126 /* Offset delays for variation */
127 .delay-1 { animation-delay: -0.5s; }
128 .delay-2 { animation-delay: -1.5s; }
129 </style>
130</head>
131<body>
132
133 <div class="radar-container">
134 <svg viewBox="0 0 200 200">
135 <!-- Background Pulse -->
136 <circle cx="100" cy="100" r="40" class="pulse" />
137 <circle cx="100" cy="100" r="40" class="pulse delay-2" />
138
139 <!-- Static Radar Elements -->
140 <!-- Vertical Crosshair -->
141 <line x1="100" y1="50" x2="100" y2="150" class="crosshair" />
142 <!-- Horizontal Crosshair -->
143 <line x1="50" y1="100" x2="150" y2="100" class="crosshair" />
144
145 <!-- Concentric Circles -->
146 <circle cx="100" cy="100" r="10" class="circle-static" />
147 <circle cx="100" cy="100" r="25" class="circle-dashed" />
148 <circle cx="100" cy="100" r="40" class="circle-static" style="stroke-width: 0.5; opacity: 0.5;"/>
149
150 <!-- Tick Ring -->
151 <circle cx="100" cy="100" r="45" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="3" stroke-dasharray="1 10.78" transform="rotate(-1.5 100 100)" />
152
153 <!-- Orbiting Groups -->
154
155 <!-- Group 1: Fast with brown dot -->
156 <g class="rotating-group">
157 <circle cx="100" cy="100" r="32" class="orbit-line" />
158 <circle cx="132" cy="100" r="3" class="dot" />
159 </g>
160
161 <!-- Group 2: Slower CCW with brown dot -->
162 <g class="rotating-group-ccw delay-1">
163 <circle cx="100" cy="100" r="50" class="orbit-line" />
164 <circle cx="50" cy="100" r="2.5" class="dot" />
165 </g>
166
167 <!-- Group 3: Thin Offset Circles -->
168 <g class="rotating-group-slow">
169 <circle cx="90" cy="95" r="40" class="orbit-line" style="stroke: rgba(255,255,255,0.2)" />
170 </g>
171
172 <g class="rotating-group delay-2" style="animation-duration: 5s;">
173 <circle cx="110" cy="105" r="35" class="orbit-line" style="stroke: rgba(255,255,255,0.2)" />
174 </g>
175
176 <!-- Smallest center indicator -->
177 <circle cx="100" cy="100" r="1.5" fill="white" opacity="0.8" />
178 </svg>
179 </div>
180
181</body>
182</html>