model output
Gemini 3 Flash Preview

Nice spinny stuff
A 0.83T 0.23
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>Heart Loading Animation</title>
7    <style>
8        /* 
9           Analysis:
10           - Background is pure white.
11           - Dots are pink (#ffc0cb) and pulse to a more vibrant pink (#ff91a4).
12           - The heart shape is constructed from small circles.
13           - The animation consists of a sequential pulse (scale/opacity) around the heart path.
14           - The entire heart shape rotates and scales slightly to create a "beating" effect.
15        */
16        
17        body {
18            margin: 0;
19            padding: 0;
20            display: flex;
21            justify-content: center;
22            align-items: center;
23            height: 100vh;
24            background-color: #ffffff;
25            overflow: hidden;
26            font-family: sans-serif;
27        }
28
29        .heart-wrapper {
30            position: relative;
31            width: 250px;
32            height: 250px;
33            /* Mimicking the slight sway and scale change of the whole shape from the video */
34            animation: containerBeat 3.5s ease-in-out infinite;
35        }
36
37        @keyframes containerBeat {
38            0%, 100% { 
39                transform: rotate(-10deg) scale(0.85); 
40            }
41            50% { 
42                transform: rotate(10deg) scale(1.05); 
43            }
44        }
45
46        .dot {
47            position: absolute;
48            width: 14px;
49            height: 14px;
50            background-color: #ffc0cb;
51            border-radius: 50%;
52            transform: translate(-50%, -50%);
53            /* Dot sequence pulse animation */
54            animation: dotWave 2s ease-in-out infinite;
55            opacity: 0.35;
56        }
57
58        @keyframes dotWave {
59            0%, 100% {
60                transform: translate(-50%, -50%) scale(1);
61                opacity: 0.35;
62                background-color: #ffc0cb;
63            }
64            40% {
65                transform: translate(-50%, -50%) scale(1.7);
66                opacity: 1;
67                background-color: #ff91a4;
68                box-shadow: 0 0 12px rgba(255, 145, 164, 0.4);
69            }
70            70% {
71                transform: translate(-50%, -50%) scale(1.1);
72                opacity: 0.5;
73            }
74        }
75    </style>
76</head>
77<body>
78
79    <div class="heart-wrapper" id="heart"></div>
80
81    <script>
82        const container = document.getElementById('heart');
83        const dotCount = 18;
84        const multiplier = 6; // Scaling factor for the heart coordinates
85        const centerOffset = 125; // Centering dots in the 250x250 wrapper
86
87        /**
88         * Generates a heart shape using parametric equations:
89         * x = 16 sin^3(t)
90         * y = 13 cos(t) - 5 cos(2t) - 2 cos(3t) - cos(4t)
91         */
92        for (let i = 0; i < dotCount; i++) {
93            const t = (i / dotCount) * 2 * Math.PI;
94            
95            const x = 16 * Math.pow(Math.sin(t), 3);
96            const y = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
97            
98            const dot = document.createElement('div');
99            dot.className = 'dot';
100            
101            // Map coordinates to container
102            dot.style.left = (centerOffset + x * multiplier) + 'px';
103            dot.style.top = (centerOffset + y * multiplier) + 'px';
104            
105            // Delay calculation creates the "flow" effect around the heart
106            // Matches the 2s loop duration of the dotWave animation
107            const delay = (i / dotCount) * 2;
108            dot.style.animationDelay = `${delay}s`;
109            
110            container.appendChild(dot);
111        }
112    </script>
113</body>
114</html>