model output
Gemini 3 Flash Preview

Only CSS: Joint Animation
A 0.78T 0.26
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>Chevron Animation Recreation</title>
7    <style>
8        :root {
9            --blue-color: #43a1d6;
10            --anim-duration: 3s;
11            --ease: cubic-bezier(0.65, 0, 0.35, 1);
12        }
13
14        body {
15            margin: 0;
16            height: 100vh;
17            display: grid;
18            place-items: center;
19            background-color: #ffffff;
20            overflow: hidden;
21        }
22
23        .container {
24            width: 300px;
25            height: 300px;
26            display: flex;
27            align-items: center;
28            justify-content: center;
29        }
30
31        svg {
32            width: 100%;
33            height: 100%;
34            overflow: visible;
35        }
36
37        .chevron {
38            fill: none;
39            stroke: var(--blue-color);
40            stroke-width: 15;
41            stroke-linecap: round;
42            stroke-linejoin: round;
43            transform-origin: 50px 50px;
44            /* Using standard CSS keyframes for rotation and path shape */
45            animation: 
46                rotate-chevron var(--anim-duration) var(--ease) infinite,
47                morph-shape var(--anim-duration) var(--ease) infinite;
48        }
49
50        /* 
51           Rotation Keyframes: 
52           Calculated based on the 'point' direction of the chevron at 0.5s intervals.
53           0s: Point Down (0deg)
54           0.5s: Point Left (90deg)
55           1.0s: Point Top (180deg)
56           1.5s: Point Bottom-Left (405deg = 360 + 45)
57           2.0s: Point Left (450deg = 360 + 90)
58           2.5s: Point Bottom-Right (675deg = 720 - 45)
59           3.0s: Point Down (720deg)
60        */
61        @keyframes rotate-chevron {
62            0% { transform: rotate(0deg); }
63            16.6% { transform: rotate(90deg); }
64            33.3% { transform: rotate(180deg); }
65            50% { transform: rotate(405deg); }
66            66.6% { transform: rotate(450deg); }
67            83.3% { transform: rotate(675deg); }
68            100% { transform: rotate(720deg); }
69        }
70
71        /* 
72           Morph Keyframes:
73           The chevron is 'wide' at the start and end of the loop, 
74           and 'sharp' (approx 90 degrees) during the rotation sequence.
75        */
76        @keyframes morph-shape {
77            0%, 100% {
78                /* Wide shape */
79                d: path('M 20 48 L 50 54 L 80 48');
80            }
81            15%, 85% {
82                /* Sharp shape (standard chevron) */
83                d: path('M 30 34 L 50 54 L 70 34');
84            }
85        }
86
87        /* Support for browsers where path() in CSS is not supported (e.g. Safari) 
88           Note: Modern Chrome, Edge, and Firefox support this. 
89        */
90    </style>
91</head>
92<body>
93
94    <div class="container">
95        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
96            <!-- The path 'd' attribute is driven by CSS animation above -->
97            <path class="chevron" d="M 20 48 L 50 54 L 80 48" />
98        </svg>
99    </div>
100
101    <script>
102        /**
103         * The animation is entirely CSS-driven for performance and smoothness.
104         * Match Timing Check:
105         * 0.0s: Wide horizontal chevron (0%)
106         * 0.5s: Rotated 90deg, pointing left (16.6%)
107         * 1.0s: Rotated 180deg, pointing up (33.3%)
108         * 1.5s: Rotated 405deg, pointing down-left (50%)
109         * 2.0s: Rotated 450deg, pointing left (66.6%)
110         * 2.5s: Rotated 675deg, pointing down-right (83.3%)
111         * 3.0s: Back to wide horizontal start (100%)
112         */
113    </script>
114</body>
115</html>