1<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
2 <defs>
3 <style>
4 /* ===== Body (KEEP) ===== */
5 .body-bounce {
6 transform-origin: 7.5px 15px;
7 animation: body-bounce 0.35s infinite ease-in-out;
8 }
9 .breathe {
10 transform-origin: 7.5px 13px;
11 animation: breathe 3.2s infinite ease-in-out;
12 }
13
14 /* ===== Arms (KEEP) ===== */
15 .arm-l-type {
16 transform-origin: 2px 10px;
17 animation: type-l 0.15s infinite ease-in-out;
18 }
19 .arm-r-type {
20 transform-origin: 13px 10px;
21 animation: type-r 0.12s infinite ease-in-out;
22 }
23
24 /* ===== Eyes ===== */
25 .eyes-code {
26 transform-origin: 7.5px 9px;
27 animation: eye-code 10s infinite ease-in-out;
28 }
29
30 /* ===== Code lines: each line grows, holds, then slides up + fades ===== */
31 .code-line {
32 transform-box: fill-box;
33 transform-origin: left center;
34 }
35 .cl1 { animation: cl1 6s infinite; }
36 .cl2 { animation: cl2 6s infinite; }
37 .cl3 { animation: cl3 6s infinite; }
38 .cl4 { animation: cl4 6s infinite; }
39
40 /* Key press flashes — different periods so they look random */
41 .key-flash { opacity: 0; }
42 .kf1 { animation: kflash 0.6s infinite; }
43 .kf2 { animation: kflash 0.8s infinite; animation-delay: -0.25s; }
44 .kf3 { animation: kflash 0.5s infinite; animation-delay: -0.1s; }
45 .kf4 { animation: kflash 0.7s infinite; animation-delay: -0.45s; }
46 .kf5 { animation: kflash 0.55s infinite; animation-delay: -0.3s; }
47 .kf6 { animation: kflash 0.9s infinite; animation-delay: -0.5s; }
48
49 /* Data particles (float up behind screen) */
50 .data-bit { opacity: 0; animation: float-data 1.5s infinite linear; }
51 .d1 { animation-delay: 0s; }
52 .d2 { animation-delay: -0.4s; }
53 .d3 { animation-delay: -0.8s; }
54 .d4 { animation-delay: -1.2s; }
55
56 /* Shadow */
57 .shadow-anim {
58 transform-origin: 7.5px 15.5px;
59 animation: shadow-bob 0.4s infinite ease-in-out;
60 }
61
62 /* ==================== Keyframes ==================== */
63
64 @keyframes body-bounce {
65 0%, 100% { transform: translateY(0); }
66 50% { transform: translateY(0.8px); }
67 }
68 @keyframes breathe {
69 0%, 100% { transform: scale(1, 1) translate(0, 0); }
70 50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
71 }
72 @keyframes shadow-bob {
73 0%, 100% { transform: scaleX(1.02); opacity: 0.5; }
74 50% { transform: scaleX(1.05); opacity: 0.55; }
75 }
76
77 @keyframes type-l {
78 0% { transform: rotate(-5deg); }
79 25% { transform: rotate(-38deg); }
80 50% { transform: rotate(-10deg); }
81 75% { transform: rotate(-30deg); }
82 100% { transform: rotate(-5deg); }
83 }
84 @keyframes type-r {
85 0% { transform: rotate(5deg); }
86 25% { transform: rotate(38deg); }
87 50% { transform: rotate(10deg); }
88 75% { transform: rotate(30deg); }
89 100% { transform: rotate(5deg); }
90 }
91
92 /* Eyes: long keyboard squint → 2 consecutive scans → keyboard */
93 @keyframes eye-code {
94 0% { transform: translate(0, 1px) scaleY(0.6); }
95 14% { transform: translate(0, 1px) scaleY(0.6); }
96 15% { transform: translate(0, 1px) scaleY(0.1); }
97 16% { transform: translate(0, 1px) scaleY(0.6); }
98 36% { transform: translate(0, 1px) scaleY(0.6); }
99 37% { transform: translate(0, 1px) scaleY(0.1); }
100 38% { transform: translate(0, 1px) scaleY(0.6); }
101 54% { transform: translate(0, 1px) scaleY(0.6); }
102 55% { transform: translate(0, 1px) scaleY(0.1); }
103 57% { transform: translate(-1px, -0.5px) scaleY(1); }
104 62% { transform: translate(1.5px, -0.5px) scaleY(1); }
105 64% { transform: translate(-0.5px, -0.3px) scaleY(1); }
106 69% { transform: translate(1.5px, -0.5px) scaleY(1); }
107 71% { transform: translate(1px, -0.3px) scaleY(0.1); }
108 73% { transform: translate(0, 1px) scaleY(0.6); }
109 89% { transform: translate(0, 1px) scaleY(0.6); }
110 90% { transform: translate(0, 1px) scaleY(0.1); }
111 91% { transform: translate(0, 1px) scaleY(0.6); }
112 100% { transform: translate(0, 1px) scaleY(0.6); }
113 }
114
115 /* Code lines: grow from left → hold → slide up + fade out
116 Each line staggers by ~15%. Slide-up gives "scroll" feel.
117 At 95-100% all invisible → brief blank → cycle restarts */
118 @keyframes cl1 {
119 0% { transform: scaleX(0); opacity: 0; }
120 3% { transform: scaleX(0); opacity: 1; }
121 13% { transform: scaleX(1); opacity: 1; }
122 13%, 78% { transform: scaleX(1) translateY(0); opacity: 1; }
123 88% { transform: scaleX(1) translateY(-3px); opacity: 0; }
124 89%, 100% { transform: scaleX(0) translateY(0); opacity: 0; }
125 }
126 @keyframes cl2 {
127 0%, 14% { transform: scaleX(0); opacity: 0; }
128 15% { transform: scaleX(0); opacity: 1; }
129 27% { transform: scaleX(1); opacity: 1; }
130 27%, 82% { transform: scaleX(1) translateY(0); opacity: 1; }
131 91% { transform: scaleX(1) translateY(-3px); opacity: 0; }
132 92%, 100% { transform: scaleX(0) translateY(0); opacity: 0; }
133 }
134 @keyframes cl3 {
135 0%, 29% { transform: scaleX(0); opacity: 0; }
136 30% { transform: scaleX(0); opacity: 1; }
137 42% { transform: scaleX(1); opacity: 1; }
138 42%, 85% { transform: scaleX(1) translateY(0); opacity: 1; }
139 93% { transform: scaleX(1) translateY(-3px); opacity: 0; }
140 94%, 100% { transform: scaleX(0) translateY(0); opacity: 0; }
141 }
142 @keyframes cl4 {
143 0%, 44% { transform: scaleX(0); opacity: 0; }
144 45% { transform: scaleX(0); opacity: 1; }
145 57% { transform: scaleX(1); opacity: 1; }
146 57%, 88% { transform: scaleX(1) translateY(0); opacity: 1; }
147 95% { transform: scaleX(1) translateY(-3px); opacity: 0; }
148 96%, 100% { transform: scaleX(0) translateY(0); opacity: 0; }
149 }
150
151 /* Key flash: brief bright pulse, mostly off */
152 @keyframes kflash {
153 0%, 70%, 100% { opacity: 0; }
154 35% { opacity: 0.8; }
155 }
156
157 @keyframes float-data {
158 0% { transform: translateY(0) scale(0.5); opacity: 0; }
159 10% { opacity: 0.8; }
160 100% { transform: translateY(-17px) scale(1); opacity: 0; }
161 }
162 </style>
163 <g id="pixel-packet">
164 <rect x="0" y="0" width="1.5" height="1.5"/>
165 </g>
166 </defs>
167
168 <!-- Ground Shadow -->
169 <rect class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000" opacity="0.5"/>
170
171 <!-- Data particles (behind screen, float up and disappear behind it) -->
172 <g fill="#40C4FF">
173 <use href="#pixel-packet" class="data-bit d1" x="3" y="7"/>
174 <use href="#pixel-packet" class="data-bit d2" x="7" y="8"/>
175 <use href="#pixel-packet" class="data-bit d3" x="11" y="7"/>
176 <use href="#pixel-packet" class="data-bit d4" x="5" y="8"/>
177 </g>
178
179 <!-- Mini Screen -->
180 <g id="screen" transform="translate(1.25, 0)">
181 <rect x="-0.5" y="-6" width="13.5" height="10.5" fill="#1E1E2E" rx="0.3"/>
182 <rect x="-0.5" y="-6" width="13.5" height="1.2" fill="#2D2D3D" rx="0.3"/>
183 <rect x="0.3" y="-5.6" width="0.5" height="0.4" fill="#FF5F56"/>
184 <rect x="1.2" y="-5.6" width="0.5" height="0.4" fill="#FFBD2E"/>
185 <rect x="2.1" y="-5.6" width="0.5" height="0.4" fill="#27C93F"/>
186
187 <!-- Code lines (indented, varying lengths = code structure) -->
188 <rect class="code-line cl1" x="0.5" y="-3.5" width="5" height="0.7" fill="#4CAF50" opacity="0.8"/>
189 <rect class="code-line cl2" x="2" y="-1.8" width="8" height="0.7" fill="#4CAF50" opacity="0.8"/>
190 <rect class="code-line cl3" x="2" y="-0.1" width="4.5" height="0.7" fill="#40C4FF" opacity="0.7"/>
191 <rect class="code-line cl4" x="0.5" y="1.6" width="2" height="0.7" fill="#FFC107" opacity="0.7"/>
192
193 </g>
194
195 <!-- Layer 1: Body -->
196 <g class="body-bounce">
197 <g id="accessory-anchor" class="breathe">
198 <g fill="#DE886D">
199 <rect x="3" y="13" width="1" height="2"/>
200 <rect x="5" y="13" width="1" height="2"/>
201 <rect x="9" y="13" width="1" height="2"/>
202 <rect x="11" y="13" width="1" height="2"/>
203 <g class="cat-behind" fill="#DE886D">
204 <rect x="2" y="5" width="1" height="2"/><rect x="3" y="4" width="1" height="3"/>
205 <rect x="11" y="4" width="1" height="3"/><rect x="12" y="5" width="1" height="2"/>
206 <rect x="13" y="12" width="2" height="1"/><rect x="14" y="10.5" width="1" height="1.5"/>
207 </g>
208 <g class="cat-inner-ear" fill="#F2A7B0">
209 <rect x="3" y="5" width="1" height="2"/><rect x="11" y="5" width="1" height="2"/>
210 </g>
211 <rect x="2" y="6" width="11" height="7"/>
212 <g class="cat-face">
213 <rect x="7" y="9.5" width="1" height="1" fill="#F2A7B0"/>
214 <g fill="#F5EDE6">
215 <rect x="-1" y="8" width="4" height="0.35"/><rect x="-1" y="11.3" width="4" height="0.35"/>
216 <rect x="12" y="8" width="4" height="0.35"/><rect x="12" y="11.3" width="4" height="0.35"/>
217 </g>
218 </g>
219 </g>
220 <g class="eyes-code" fill="#000">
221 <rect x="4" y="8" width="1" height="2"/>
222 <rect x="10" y="8" width="1" height="2"/>
223 </g>
224 </g>
225 </g>
226
227 <!-- Layer 2: Keyboard -->
228 <g id="keyboard" transform="translate(-0.5, 11.8)">
229 <rect x="0" y="0" width="16" height="3.2" fill="#455A64" rx="0.3"/>
230 <g fill="#78909C">
231 <rect x="0.5" y="0.4" width="1" height="0.7"/>
232 <rect x="1.8" y="0.4" width="1" height="0.7"/>
233 <rect x="3.5" y="0.4" width="6" height="0.7" rx="0.2"/>
234 <rect x="10.2" y="0.4" width="1" height="0.7"/>
235 <rect x="11.5" y="0.4" width="1" height="0.7"/>
236 <rect x="12.8" y="0.4" width="1" height="0.7"/>
237 <rect x="14.1" y="0.4" width="1.3" height="0.7"/>
238 </g>
239 <g fill="#78909C">
240 <rect x="0.8" y="1.3" width="0.9" height="0.7"/>
241 <rect x="2.0" y="1.3" width="0.9" height="0.7"/>
242 <rect x="3.2" y="1.3" width="0.9" height="0.7"/>
243 <rect x="4.4" y="1.3" width="0.9" height="0.7"/>
244 <rect x="5.6" y="1.3" width="0.9" height="0.7"/>
245 <rect x="6.8" y="1.3" width="0.9" height="0.7"/>
246 <rect x="8.0" y="1.3" width="0.9" height="0.7"/>
247 <rect x="9.2" y="1.3" width="0.9" height="0.7"/>
248 <rect x="10.4" y="1.3" width="0.9" height="0.7"/>
249 <rect x="11.6" y="1.3" width="0.9" height="0.7"/>
250 <rect x="12.8" y="1.3" width="0.9" height="0.7"/>
251 <rect x="14.0" y="1.3" width="0.9" height="0.7"/>
252 </g>
253 <g fill="#78909C">
254 <rect x="0.5" y="2.2" width="0.9" height="0.7"/>
255 <rect x="1.7" y="2.2" width="0.9" height="0.7"/>
256 <rect x="2.9" y="2.2" width="0.9" height="0.7"/>
257 <rect x="4.1" y="2.2" width="0.9" height="0.7"/>
258 <rect x="5.3" y="2.2" width="0.9" height="0.7"/>
259 <rect x="6.5" y="2.2" width="0.9" height="0.7"/>
260 <rect x="7.7" y="2.2" width="0.9" height="0.7"/>
261 <rect x="8.9" y="2.2" width="0.9" height="0.7"/>
262 <rect x="10.1" y="2.2" width="0.9" height="0.7"/>
263 <rect x="11.3" y="2.2" width="0.9" height="0.7"/>
264 <rect x="12.5" y="2.2" width="0.9" height="0.7"/>
265 <rect x="13.7" y="2.2" width="0.9" height="0.7"/>
266 <rect x="14.9" y="2.2" width="0.6" height="0.7"/>
267 </g>
268 <!-- Key press highlights (overlay on top of keys) -->
269 <g fill="#B0BEC5">
270 <rect class="key-flash kf1" x="4.4" y="1.3" width="0.9" height="0.7"/>
271 <rect class="key-flash kf2" x="9.2" y="1.3" width="0.9" height="0.7"/>
272 <rect class="key-flash kf3" x="2.9" y="2.2" width="0.9" height="0.7"/>
273 <rect class="key-flash kf4" x="7.7" y="2.2" width="0.9" height="0.7"/>
274 <rect class="key-flash kf5" x="11.6" y="1.3" width="0.9" height="0.7"/>
275 <rect class="key-flash kf6" x="3.5" y="0.4" width="6" height="0.7" rx="0.2"/>
276 </g>
277 </g>
278
279 <!-- Layer 3: Arms -->
280 <g class="body-bounce">
281 <g class="breathe">
282 <g fill="#DE886D">
283 <g class="arm-l-type"><rect x="0" y="9" width="2" height="2"/></g>
284 <g class="arm-r-type"><rect x="13" y="9" width="2" height="2"/></g>
285 </g>
286 </g>
287 </g>
288</svg>
whiskers-speaking.svg