model output
Qwen3-VL-8B-Instruct

Only CSS: Pulse Box
A 0.44T 0.24
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>Abstract Geometric Animation</title>
7    <style>
8        body {
9            margin: 0;
10            overflow: hidden;
11            background-color: black;
12        }
13        .shape {
14            position: absolute;
15            border: 2px solid;
16            border-radius: 5px;
17            transform-origin: center;
18            animation: rotate 4s linear infinite;
19        }
20        .green {
21            border-color: #00ff7f;
22            animation-delay: 0s;
23        }
24        .blue {
25            border-color: #0000ff;
26            animation-delay: 0.5s;
27        }
28        .teal {
29            border-color: #00ffff;
30            animation-delay: 1s;
31        }
32        @keyframes rotate {
33            0% {
34                transform: rotate(0deg) translate(0, 0);
35            }
36            100% {
37                transform: rotate(360deg) translate(0, 0);
38            }
39        }
40        @keyframes move {
41            0% {
42                transform: translate(0, 0);
43            }
44            50% {
45                transform: translate(100px, 100px);
46            }
47            100% {
48                transform: translate(0, 0);
49            }
50        }
51    </style>
52</head>
53<body>
54    <script>
55        function createShapes() {
56            const container = document.body;
57            const colors = ['#00ff7f', '#0000ff', '#00ffff'];
58            const shapes = [];
59
60            for (let i = 0; i < 20; i++) {
61                const shape = document.createElement('div');
62                shape.className = 'shape';
63                shape.style.width = `${Math.random() * 100 + 50}px`;
64                shape.style.height = `${Math.random() * 100 + 50}px`;
65                shape.style.left = `${Math.random() * 100}%`;
66                shape.style.top = `${Math.random() * 100}%`;
67                shape.style.animationDuration = `${Math.random() * 3 + 2}s`;
68                shape.style.animationDelay = `${Math.random() * 2}s`;
69                shape.style.borderRadius = `${Math.random() * 50 + 10}px`;
70                shape.style.transform = `rotate(${Math.random() * 360}deg)`;
71                shape.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
72                shape.style.boxShadow = `0 0 ${Math.random() * 50 + 10}px ${colors[Math.floor(Math.random() * colors.length)]}`;
73                container.appendChild(shape);
74                shapes.push(shape);
75            }
76
77            // Add animation for each shape
78            shapes.forEach((shape, index) => {
79                const delay = index * 0.1;
80                const duration = Math.random() * 3 + 2;
81                const color = colors[Math.floor(Math.random() * colors.length)];
82                shape.style.animation = `rotate ${duration}s linear ${delay}s infinite`;
83                shape.style.borderColor = color;
84                shape.style.animationName = 'rotate';
85            });
86        }
87
88        window.onload = createShapes;
89    </script>
90</body>
91</html>