model output
Gemini 3 Flash Preview

Animated Concepts #3
A 0.84T 0.29
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>Diamond Loading Animation</title>
7    <style>
8        /* Define colors and sizing based on visual analysis */
9        :root {
10            --bg-color: #222222;
11            --accent-color: #e57373;
12            --center-size: 16px;
13            --outer-size: 9px;
14            --travel-dist: 28px;
15            --anim-speed: 1.2s;
16        }
17
18        * {
19            margin: 0;
20            padding: 0;
21            box-sizing: border-box;
22        }
23
24        body {
25            background-color: var(--bg-color);
26            display: flex;
27            justify-content: center;
28            align-items: center;
29            height: 100vh;
30            overflow: hidden;
31        }
32
33        .loader {
34            position: relative;
35            width: 100px;
36            height: 100px;
37            display: flex;
38            justify-content: center;
39            align-items: center;
40        }
41
42        .diamond {
43            position: absolute;
44            background-color: var(--accent-color);
45            /* Diamonds are squares rotated 45 degrees */
46            transform: rotate(45deg);
47        }
48
49        /* The center, larger diamond */
50        .center {
51            width: var(--center-size);
52            height: var(--center-size);
53            z-index: 2;
54            animation: pulse var(--anim-speed) ease-in-out infinite;
55        }
56
57        /* Outer smaller diamonds */
58        .outer {
59            width: var(--outer-size);
60            height: var(--outer-size);
61        }
62
63        /* Position and animate each outer diamond in its specific direction */
64        .top {
65            animation: move-top var(--anim-speed) ease-in-out infinite;
66        }
67
68        .bottom {
69            animation: move-bottom var(--anim-speed) ease-in-out infinite;
70        }
71
72        .left {
73            animation: move-left var(--anim-speed) ease-in-out infinite;
74        }
75
76        .right {
77            animation: move-right var(--anim-speed) ease-in-out infinite;
78        }
79
80        /* Center diamond scaling slightly in sync with outer movement */
81        @keyframes pulse {
82            0%, 100% { transform: rotate(45deg) scale(1); }
83            50% { transform: rotate(45deg) scale(0.85); }
84        }
85
86        /* Individual directional keyframes to preserve the 45deg rotation */
87        @keyframes move-top {
88            0%, 100% { transform: translateY(-12px) rotate(45deg); }
89            50% { transform: translateY(calc(var(--travel-dist) * -1)) rotate(45deg); }
90        }
91
92        @keyframes move-bottom {
93            0%, 100% { transform: translateY(12px) rotate(45deg); }
94            50% { transform: translateY(var(--travel-dist)) rotate(45deg); }
95        }
96
97        @keyframes move-left {
98            0%, 100% { transform: translateX(-12px) rotate(45deg); }
99            50% { transform: translateX(calc(var(--travel-dist) * -1)) rotate(45deg); }
100        }
101
102        @keyframes move-right {
103            0%, 100% { transform: translateX(12px) rotate(45deg); }
104            50% { transform: translateX(var(--travel-dist)) rotate(45deg); }
105        }
106    </style>
107</head>
108<body>
109
110    <div class="loader">
111        <!-- Center Diamond -->
112        <div class="diamond center"></div>
113        
114        <!-- Outer Diamonds -->
115        <div class="diamond outer top"></div>
116        <div class="diamond outer bottom"></div>
117        <div class="diamond outer left"></div>
118        <div class="diamond outer right"></div>
119    </div>
120
121</body>
122</html>