← back to CSS Direction Animationcompare with ground truth →
model output
Gemini 3 Flash Preview
CSS Direction Animation
A 0.56T 0.48
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>Sacred Geometry Animation</title>
7 <style>
8 /* Basic layout styling to match the video's background split */
9 body, html {
10 margin: 0;
11 padding: 0;
12 width: 100%;
13 height: 100%;
14 overflow: hidden;
15 display: flex;
16 flex-direction: column;
17 background-color: #ffffff;
18 }
19
20 .top-half {
21 height: 50%;
22 width: 100%;
23 background-color: #e2e2e2;
24 position: relative;
25 display: flex;
26 justify-content: center;
27 align-items: center;
28 }
29
30 .bottom-half {
31 height: 50%;
32 width: 100%;
33 background-color: #ffffff;
34 }
35
36 /* Container for the logo, centered in the top half */
37 .canvas {
38 position: absolute;
39 top: 50%;
40 left: 50%;
41 transform: translate(-50%, -50%);
42 }
43
44 /* Base rotation of the entire star (approx. 60s for a full loop) */
45 .rotation-wrapper {
46 animation: global-rotate 60s linear infinite;
47 }
48
49 /* Pulsing opacity animation for the whole shape */
50 .pulse-wrapper {
51 animation: global-pulse 7.5s ease-in-out infinite;
52 display: flex;
53 justify-content: center;
54 align-items: center;
55 }
56
57 /* Petal styling */
58 .petal {
59 position: absolute;
60 width: 80px;
61 height: 180px;
62 transform-origin: center center;
63 mix-blend-mode: multiply;
64 /* Creating the rhombus shape using clip-path */
65 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
66 /* Individually fan out each petal based on its index */
67 animation: fan 7.5s ease-in-out infinite;
68 }
69
70 /* Keyframes for the global rotation */
71 @keyframes global-rotate {
72 from { transform: rotate(0deg); }
73 to { transform: rotate(360deg); }
74 }
75
76 /* Keyframes for the fading pulse effect */
77 @keyframes global-pulse {
78 0%, 100% { opacity: 0.8; transform: scale(1); }
79 50% { opacity: 0.08; transform: scale(0.95); }
80 }
81
82 /* Keyframes for the fanning animation where petals move relative to each other */
83 @keyframes fan {
84 0%, 100% {
85 transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg));
86 }
87 50% {
88 /* Petals split apart: even rotate one way, odd the other */
89 transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg + (var(--dir) * 22.5deg)));
90 }
91 }
92
93 /* Define petal specific properties using CSS variables */
94 /* Direction (--dir) is used to split pairs in opposite directions during the fan animation */
95 .petal:nth-child(1) { --i: 0; --dir: 1; background-color: #d84384; }
96 .petal:nth-child(2) { --i: 1; --dir: -1; background-color: #f37d40; }
97 .petal:nth-child(3) { --i: 2; --dir: 1; background-color: #f9d453; }
98 .petal:nth-child(4) { --i: 3; --dir: -1; background-color: #bcd45c; }
99 .petal:nth-child(5) { --i: 4; --dir: 1; background-color: #69b56b; }
100 .petal:nth-child(6) { --i: 5; --dir: -1; background-color: #46b8c9; }
101 .petal:nth-child(7) { --i: 6; --dir: 1; background-color: #5a77b8; }
102 .petal:nth-child(8) { --i: 7; --dir: -1; background-color: #9d65ab; }
103
104 </style>
105</head>
106<body>
107
108 <div class="top-half">
109 <div class="canvas">
110 <div class="rotation-wrapper">
111 <div class="pulse-wrapper">
112 <!-- 8 Petals to form the star -->
113 <div class="petal"></div>
114 <div class="petal"></div>
115 <div class="petal"></div>
116 <div class="petal"></div>
117 <div class="petal"></div>
118 <div class="petal"></div>
119 <div class="petal"></div>
120 <div class="petal"></div>
121 </div>
122 </div>
123 </div>
124 </div>
125 <div class="bottom-half"></div>
126
127</body>
128</html>