model output
Qwen3-VL-8B-Instruct

SVG Multi-Drip
A 0.56T 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>Particle Animation</title>
7    <style>
8        body {
9            background-color: #222;
10            overflow: hidden;
11            margin: 0;
12            padding: 0;
13            display: flex;
14            justify-content: center;
15            align-items: center;
16            height: 100vh;
17        }
18        .container {
19            position: relative;
20            width: 100%;
21            height: 100%;
22        }
23        .wave {
24            position: absolute;
25            top: 50%;
26            left: 50%;
27            transform: translate(-50%, -50%);
28            width: 100%;
29            height: 2px;
30            background: linear-gradient(to right, magenta, red);
31            border-radius: 50%;
32            overflow: hidden;
33        }
34        .wave::before {
35            content: '';
36            position: absolute;
37            top: 0;
38            left: 0;
39            width: 100%;
40            height: 100%;
41            background: linear-gradient(to right, magenta, red);
42            border-radius: 50%;
43            animation: wave 2s ease-in-out infinite;
44        }
45        @keyframes wave {
46            0% {
47                transform: translate(-50%, -50%) scale(1);
48            }
49            50% {
50                transform: translate(-50%, -50%) scale(1.1);
51            }
52            100% {
53                transform: translate(-50%, -50%) scale(1);
54            }
55        }
56        .particles {
57            position: absolute;
58            top: 50%;
59            left: 50%;
60            transform: translate(-50%, -50%);
61            width: 100%;
62            height: 100%;
63            pointer-events: none;
64        }
65        .particle {
66            position: absolute;
67            width: 10px;
68            height: 10px;
69            border-radius: 50%;
70            background: magenta;
71            animation: float 2s ease-in-out infinite;
72        }
73        @keyframes float {
74            0% {
75                transform: translateY(0) scale(0.5);
76                opacity: 0;
77            }
78            50% {
79                transform: translateY(-20px) scale(1.2);
80                opacity: 1;
81            }
82            100% {
83                transform: translateY(0) scale(0.5);
84                opacity: 0;
85            }
86        }
87    </style>
88</head>
89<body>
90    <div class="container">
91        <div class="wave"></div>
92        <div class="particles" id="particles"></div>
93    </div>
94
95    <script>
96        const particlesContainer = document.getElementById('particles');
97        const wave = document.querySelector('.wave');
98        const waveWidth = wave.offsetWidth;
99        const waveHeight = wave.offsetHeight;
100
101        // Create particles
102        for (let i = 0; i < 20; i++) {
103            const particle = document.createElement('div');
104            particle.classList.add('particle');
105            particle.style.left = `${Math.random() * 100}%`;
106            particle.style.animationDelay = `${Math.random() * 2}s`;
107            particle.style.animationDuration = `${2 + Math.random() * 2}s`;
108            particle.style.opacity = '0.7';
109            particle.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
110            particlesContainer.appendChild(particle);
111        }
112
113        // Animate wave
114        const waveAnimation = () => {
115            const wave = document.querySelector('.wave');
116            wave.style.transform = `translate(-50%, -50%) scale(${1 + Math.sin(Date.now() / 1000) * 0.1})`;
117        };
118
119        setInterval(waveAnimation, 100);
120    </script>
121</body>
122</html>