model output
Gemini 3 Flash Preview

Animated Concepts #3
A 0.85T 0.27
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>Elastic Bounce Animation</title>
7    <style>
8        :root {
9            --bg-color: #212121;
10            --accent-color: #f37e78;
11            --anim-duration: 1.2s;
12        }
13
14        body {
15            margin: 0;
16            padding: 0;
17            display: flex;
18            justify-content: center;
19            align-items: center;
20            height: 100vh;
21            background-color: var(--bg-color);
22            overflow: hidden;
23        }
24
25        .container {
26            position: relative;
27            width: 200px;
28            height: 200px;
29        }
30
31        /* The SVG contains both the line and the ball for coordinated animation */
32        svg {
33            width: 100%;
34            height: 100%;
35        }
36
37        #ball {
38            fill: var(--accent-color);
39            /* Initial position */
40            transform: translateY(-45px);
41            animation: ball-bounce var(--anim-duration) cubic-bezier(0.45, 0, 0.55, 1) infinite;
42            transform-origin: center;
43        }
44
45        #elastic-line {
46            stroke: var(--accent-color);
47            stroke-width: 4;
48            stroke-linecap: round;
49            fill: none;
50            /* Animating the 'd' attribute is supported in modern browsers via CSS */
51            animation: line-stretch var(--anim-duration) cubic-bezier(0.45, 0, 0.55, 1) infinite;
52        }
53
54        /* 
55           Animation logic:
56           0% - 40%: Falling down
57           40% - 55%: Impact and stretching the line downwards
58           55% - 70%: Snapping back up
59           70% - 100%: Rising to peak height
60        */
61
62        @keyframes ball-bounce {
63            0%, 100% {
64                transform: translateY(-45px) scale(1, 1);
65            }
66            /* Point of impact */
67            40% {
68                transform: translateY(0px) scale(0.9, 1.1);
69            }
70            /* Maximum stretch */
71            50% {
72                transform: translateY(15px) scale(1.2, 0.8);
73            }
74            /* Point of release */
75            60% {
76                transform: translateY(0px) scale(0.9, 1.1);
77            }
78        }
79
80        @keyframes line-stretch {
81            /* M 70 100 Q 100 100 130 100 is a flat horizontal line 60px wide */
82            0%, 38%, 65%, 100% {
83                d: path('M 70 100 Q 100 100 130 100');
84            }
85            /* Max downward bend: Control point moves down, ends pull in slightly */
86            50% {
87                d: path('M 75 100 Q 100 130 125 100');
88            }
89        }
90    </style>
91</head>
92<body>
93
94    <div class="container">
95        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
96            <!-- The elastic line path -->
97            <path id="elastic-line" d="M 70 100 Q 100 100 130 100" />
98            
99            <!-- The bouncing ball -->
100            <!-- 100, 100 is the resting point on the line -->
101            <circle id="ball" cx="100" cy="90" r="10" />
102        </svg>
103    </div>
104
105    <script>
106        /**
107         * The animation is handled entirely via CSS for maximum performance.
108         * The 'd' attribute animation in CSS works in Chromium and Firefox.
109         * For Safari compatibility or older browsers, an SVG SMIL <animate> 
110         * tag could be used, but CSS is the modern standard for this behavior.
111         */
112    </script>
113</body>
114</html>