Gemini 3 Flash Preview

#CodeVember #12 - shrinking hexagon
A 0.68T 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>Geometric Hexagon Animation</title>
7    <style>
8        /*
9         * Colors:
10         * Background: #222222
11         * Shapes: #cccccc
12         */
13        body {
14            margin: 0;
15            padding: 0;
16            background-color: #222222;
17            display: flex;
18            justify-content: center;
19            align-items: center;
20            height: 100vh;
21            overflow: hidden;
22        }
23
24        .container {
25            position: relative;
26            width: 300px;
27            height: 300px;
28            display: flex;
29            justify-content: center;
30            align-items: center;
31        }
32
33        /* Central Hexagon */
34        .hexagon {
35            position: absolute;
36            width: 70px;
37            height: 80.8px; /* width * 1.154 for equilateral proportions */
38            background-color: #cccccc;
39            /* clip-path for a flat-topped/bottomed hexagon */
40            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
41            z-index: 2;
42        }
43
44        /* Triangle shards */
45        .triangle {
46            position: absolute;
47            width: 50px;
48            height: 43.3px; /* equilateral triangle height */
49            background-color: #cccccc;
50            /* points downwards by default */
51            clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
52            z-index: 1;
53            /* Initial state matches first frame */
54            transform: rotate(var(--rot)) translateY(-110px) scale(0.2);
55            opacity: 0.4;
56            animation: moveInOut 2s ease-in-out infinite;
57        }
58
59        /**
60         * Keyframe Analysis:
61         * 0s: Triangles are far from center, small, and faint.
62         * 0.5s: Triangles move closer, scale up, and point towards center.
63         * 1s: Triangles move through/to center, rotating 180 degrees to point outwards.
64         * 1.5s: Triangles move back out.
65         * 2s: Loop completes.
66         */
67        @keyframes moveInOut {
68            0%, 100% {
69                transform: rotate(var(--rot)) translateY(-115px) scale(0.2);
70                opacity: 0.3;
71            }
72            50% {
73                /* At mid-point, they meet at the center and rotate 180deg */
74                transform: rotate(calc(var(--rot) + 180deg)) translateY(10px) scale(1.3);
75                opacity: 1;
76            }
77        }
78    </style>
79</head>
80<body>
81
82    <div class="container" id="animationContainer">
83        <!-- Main central hexagon -->
84        <div class="hexagon"></div>
85        <!-- Triangles will be injected by JavaScript to keep code concise -->
86    </div>
87
88    <script>
89        const container = document.getElementById('animationContainer');
90        const numTriangles = 12; // 2 sets of 6 triangles for the layered look
91
92        for (let i = 0; i < numTriangles; i++) {
93            const tri = document.createElement('div');
94            tri.className = 'triangle';
95            
96            // Set up two sets of triangles
97            // Set 1 (0, 60, 120...) moves in sync
98            // Set 2 (30, 90, 150...) is offset by half the duration
99            const isSecondSet = i >= 6;
100            const baseAngle = (i % 6) * 60;
101            const angle = isSecondSet ? baseAngle + 30 : baseAngle;
102            
103            tri.style.setProperty('--rot', `${angle}deg`);
104            
105            // Staggering the animation creates the complex overlapping geometry
106            if (isSecondSet) {
107                tri.style.animationDelay = '-1s'; // Offset by half of the 2s loop
108            }
109            
110            container.appendChild(tri);
111        }
112    </script>
113</body>
114</html>