model output
LLaMA 4 Scout

Thinking about SVG-preloaders
A 0.22T 0.00
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: black;
10            margin: 0;
11            display: flex;
12            justify-content: center;
13            align-items: center;
14            height: 100vh;
15            overflow: hidden;
16        }
17        .circles {
18            position: relative;
19            width: 200px;
20            height: 200px;
21        }
22        .circle {
23            position: absolute;
24            border-radius: 50%;
25            opacity: 0;
26            animation: fadeInOut 8s infinite;
27        }
28        @keyframes fadeInOut {
29            0% {
30                opacity: 1;
31                transform: scale(1);
32            }
33            100% {
34                opacity: 0;
35                transform: scale(1.5);
36            }
37        }
38    </style>
39</head>
40<body>
41    <div class="circles">
42        <!-- Circles will be generated here -->
43    </div>
44
45    <script>
46        const colors = ['#FFD700', '#FFA500', '#FF8C00', '#FF4500'];
47        const circleCount = 12;
48        const circleContainer = document.querySelector('.circles');
49
50        for (let i = 0; i < circleCount; i++) {
51            const circle = document.createElement('div');
52            circle.classList.add('circle');
53            circle.style.top = `${50 + (i * 20)}px`;
54            circle.style.left = `${100}px`;
55            circle.style.background = colors[i % colors.length];
56            circle.style.animationDelay = `${i * 0.5}s`;
57            circleContainer.appendChild(circle);
58        }
59    </script>
60</body>
61</html>