model output
LLaMA 4 Scout

Only CSS: Planet Ring
A 0.46T 0.11
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        .animation-container {
9            position: relative;
10            width: 200px;
11            height: 200px;
12        }
13        .record {
14            position: absolute;
15            width: 100%;
16            height: 100%;
17            border-radius: 50%;
18            background: 
19                radial-gradient(white 50%, transparent 50%),
20                radial-gradient(white 50%, transparent 50%),
21                #333;
22            background-size: 20px 20px, 20px 20px;
23            background-position: 0 0, 10px 10px;
24            background-repeat: no-repeat;
25        }
26        .ball {
27            position: absolute;
28            width: 50%;
29            height: 50%;
30            top: 50%;
31            left: 50%;
32            transform: translate(-50%, -50%);
33            border-radius: 50%;
34            background: #ff3737;
35            border: 2px solid #000;
36        }
37        .lines {
38            position: absolute;
39            width: 100%;
40            height: 100%;
41        }
42        .line {
43            position: absolute;
44            width: 2px;
45            height: 100%;
46            background: #000;
47            transform-origin: top center;
48        }
49    </style>
50</head>
51<body>
52    <div class="animation-container">
53        <div class="record"></div>
54        <div class="ball"></div>
55        <svg class="lines" viewBox="0 0 200 200">
56            <!-- Lines will be generated here -->
57        </svg>
58    </div>
59
60    <script>
61        // Get the container and SVG elements
62        const container = document.querySelector('.animation-container');
63        const svg = document.querySelector('svg');
64
65        // Function to generate lines
66        function generateLines() {
67            for (let i = 0; i < 20; i++) {
68                const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
69                line.setAttribute('x1', 100);
70                line.setAttribute('y1', 100);
71                line.setAttribute('x2', 100);
72                line.setAttribute('y2', 0);
73                line.setAttribute('stroke', '#000');
74                line.setAttribute('stroke-width', '2');
75                line.setAttribute('transform', `rotate(${i*18}, 100, 100)`);
76                svg.appendChild(line);
77            }
78        }
79
80        // Generate lines
81        generateLines();
82
83        // Animate the ball and lines
84        let angle = 0;
85        function animate() {
86            angle += 1;
87            if (angle > 360) angle = 0;
88
89            // Update ball position
90            const ball = document.querySelector('.ball');
91            ball.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
92
93            // Update lines position
94            const lines = document.querySelectorAll('.line');
95            lines.forEach((line, index) => {
96                line.setAttribute('transform', `rotate(${angle + index*18}, 100, 100)`);
97            });
98
99            requestAnimationFrame(animate);
100        }
101
102        animate();
103    </script>
104</body>
105</html>