← back to Only CSS: Planet Ringcompare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Planet Ring
A 0.71T 0.32
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>Orbiting Rings Animation</title>
7 <style>
8 :root {
9 --bg-color: #efefff;
10 --sphere-color: #ff6333;
11 --ring-color: #424242;
12 --border-width: 5px;
13 --animation-duration: 4s;
14 --ring-count: 12;
15 }
16
17 * {
18 margin: 0;
19 padding: 0;
20 box-sizing: border-box;
21 }
22
23 body {
24 background-color: var(--bg-color);
25 height: 100vh;
26 display: flex;
27 justify-content: center;
28 align-items: center;
29 overflow: hidden;
30 perspective: 1200px;
31 }
32
33 .container {
34 position: relative;
35 width: 500px;
36 height: 500px;
37 display: flex;
38 justify-content: center;
39 align-items: center;
40 transform-style: preserve-3d;
41 }
42
43 /* The central orange sphere */
44 .sphere {
45 position: absolute;
46 width: 120px;
47 height: 120px;
48 background-color: var(--sphere-color);
49 border: 8px solid #000;
50 border-radius: 50%;
51 z-index: 10;
52 /* Inner shadow to give a slight 3D spherical effect seen in the video */
53 box-shadow: inset -12px -12px 0px rgba(0, 0, 0, 0.1);
54 transform: translateZ(1px); /* Keep it slightly in front of the center plane */
55 }
56
57 /* Container for all rings */
58 .rings-wrapper {
59 position: absolute;
60 width: 100%;
61 height: 100%;
62 display: flex;
63 justify-content: center;
64 align-items: center;
65 transform-style: preserve-3d;
66 }
67
68 .ring {
69 position: absolute;
70 border-radius: 50%;
71 border: var(--border-width) solid var(--ring-color);
72 transform-style: preserve-3d;
73 animation: orbit var(--animation-duration) ease-in-out infinite;
74 pointer-events: none;
75 }
76
77 /*
78 The animation mimics the complex 3D tilting and flattening.
79 The sequence involves rotating around X and Y axes with a phase shift.
80 */
81 @keyframes orbit {
82 0% {
83 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
84 }
85 50% {
86 /* At mid-point, they fan out and reach the perpendicular alignment */
87 transform: rotateX(180deg) rotateY(180deg) rotateZ(90deg);
88 }
89 100% {
90 transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg);
91 }
92 }
93 </style>
94</head>
95<body>
96
97 <div class="container">
98 <div class="sphere"></div>
99 <div class="rings-wrapper" id="rings-container">
100 <!-- Rings will be generated here by JavaScript -->
101 </div>
102 </div>
103
104 <script>
105 const container = document.getElementById('rings-container');
106 const ringCount = 12;
107 const baseSize = 160; // Starting diameter for the first ring
108 const sizeIncrement = 30; // Gap between rings
109
110 for (let i = 0; i < ringCount; i++) {
111 const ring = document.createElement('div');
112 ring.classList.add('ring');
113
114 // Set size for each nested ring
115 const size = baseSize + (i * sizeIncrement);
116 ring.style.width = `${size}px`;
117 ring.style.height = `${size}px`;
118
119 // Stagger the animation timing to create the wave/fan effect
120 // We use a negative delay so the animation starts at different points immediately
121 const delay = (i * 0.12).toFixed(2);
122 ring.style.animationDelay = `-${delay}s`;
123
124 // Adjust z-index or stack order slightly (optional for visual depth)
125 ring.style.zIndex = ringCount - i;
126
127 container.appendChild(ring);
128 }
129
130 /*
131 Matching Timing observations:
132 - 0s: Rings are flat and concentric.
133 - 1s-2s: They start twisting, creating the 'eye' shape.
134 - 2.5s: They reach a point where they align as thin vertical lines.
135 - 4s-5s: They return to the starting flat nested position before cycling.
136
137 The 'ease-in-out' timing function on a 4s loop with the 0.12s stagger
138 replicates the elastic-like motion of the fan opening and closing.
139 */
140 </script>
141</body>
142</html>