model output
Gemini 3 Flash Preview

Animated Concepts #3
A 0.84T 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>Circular Loader Animation</title>
7  <style>
8    /* 
9      Analysis:
10      - Background: Very dark gray (#1a1a1a).
11      - Color: Salmon/Pink (#f38d8d).
12      - Shape: Two concentric partial rings and a center dot.
13      - Motion: Both rings rotate clockwise with an ease-in-out timing function.
14      - Speed: The inner ring rotates faster than the outer ring, creating a shifting phase effect.
15      - Duration: Outer loop approx 2s, Inner loop approx 1.25s.
16    */
17
18    body {
19      margin: 0;
20      padding: 0;
21      background-color: #1a1a1a;
22      display: flex;
23      justify-content: center;
24      align-items: center;
25      height: 100vh;
26      overflow: hidden;
27    }
28
29    .loader-container {
30      width: 150px;
31      height: 150px;
32      display: flex;
33      justify-content: center;
34      align-items: center;
35    }
36
37    svg {
38      width: 100%;
39      height: 100%;
40    }
41
42    .center-dot {
43      fill: #f38d8d;
44    }
45
46    .ring {
47      fill: none;
48      stroke: #f38d8d;
49      stroke-width: 2.2;
50      stroke-linecap: round;
51      transform-origin: center;
52    }
53
54    /* 
55       Outer Ring:
56       - Radius: 35
57       - Arc length: ~115 degrees (approx 70 units on 220 circumference)
58       - Duration: 2 seconds
59    */
60    .outer-ring {
61      stroke-dasharray: 70 150;
62      animation: rotate-ring 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
63    }
64
65    /* 
66       Inner Ring:
67       - Radius: 20
68       - Arc length: ~115 degrees (approx 40 units on 125 circumference)
69       - Duration: 1.25 seconds (Creates the 'lapping' effect seen in the video)
70    */
71    .inner-ring {
72      stroke-dasharray: 40 85;
73      animation: rotate-ring 1.25s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
74    }
75
76    /*
77       Rotation Keyframes:
78       Initial 180deg rotation aligns the start position (opening on the right, arc on the left) 
79       to match the video's starting frame.
80    */
81    @keyframes rotate-ring {
82      from {
83        transform: rotate(180deg);
84      }
85      to {
86        transform: rotate(540deg);
87      }
88    }
89  </style>
90</head>
91<body>
92
93  <div class="loader-container">
94    <svg viewBox="0 0 100 100">
95      <!-- Center Dot -->
96      <circle class="center-dot" cx="50" cy="50" r="2" />
97      
98      <!-- Inner Ring -->
99      <circle class="ring inner-ring" cx="50" cy="50" r="20" />
100      
101      <!-- Outer Ring -->
102      <circle class="ring outer-ring" cx="50" cy="50" r="35" />
103    </svg>
104  </div>
105
106</body>
107</html>