whiskers.git / assets / whiskers / whiskers-notification.svg
whiskers-notification.svg453 lines · 21.1 KB · raw
1<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
2  <!-- PoC v8: v7 左右翻转版
3       唯一改动: master-group 加 transform="translate(15, 0) scale(-1, 1)"
4                围绕 viewBox 中心 X=7.5 镜像翻转
5       视觉效果: 举手从右上变左上, body 倾斜方向反转, 左右腿角色互换
6       本仓库版额外压缩前段 timing: 更快举手, 保留中后段亮灯 hold
7       ground-shadow 在 master-group 外保持不动 (本身左右对称)
8  -->
9
10  <!-- v7 原注释保留作为技术参考: v6 + 眼睛序列 + 灯泡跟手摆动 + rays 居中修正
11       v6 → v7 三件改动:
12         1. 眼睛运动序列:
13            - 11-16% rect 眼移到右上看灯泡 (+1px, -0.5px)
14            - 16-24% 保持看灯泡
15            - 28% 回正中
16            - 30% 眨眼 (scaleY 0.1)
17            - 31-72% 切换为 ^^ 微笑眼 (复刻 mini-happy 的 polyline)
18            - 73-74% 微笑收起, rect 重新睁开
19            实现: rect 眼 + smile 眼 两套元素叠加, opacity step-end 切换 + scaleY 眨眼
20         2. 灯泡跟手微摆: lightbulb-zone 在 hold 期 (30-66%) 加微抖 (跟身体晃同步)
21            translate ±0.3px / ±0.2px, 比身体晃小一档, 表达"被举着也跟着重心晃"
22         3. rays 重排居中:
23            - 上下 y 范围从 [-5.8~7.2] 改为 [-5~5] 严格对称
24            - 几何中心从 (13.5, 1.0) 上移到 (13.5, 0.5), 更接近灯泡玻璃罩中心 (13.04, 0.16)
25            - transform-origin 同步改为 13.5px 0.5px
26
27       6s loop 时间轴:
28         0-3%    idle
29         3-10%   右手举到 -3px
30         10-16%  右手 hold + 灯泡 pop, 11% 眼睛开始看灯泡
31         16-24%  ★ 用力: body 右倾下压, 左腿被挤抬, 右手多举 1.5px
32         24-30%  眼睛回正中 + 灯丝亮起
33         24-66%  hold 用力姿态 + rays 闪 + body/腿/灯泡微抖
34         30%     眨眼瞬间
35         31-72%  ^^ 微笑眼显示
36         66-76%  右手回到 -3px, body 回正
37         70%     灯泡消失
38         73-74%  微笑收起, rect 眼重新睁开
39         76-84%  右手放下
40         84-100% 复位 idle
41  -->
42
43  <defs>
44    <style>
45      .body-breathe {
46        transform-box: view-box;
47        transform-origin: 7.5px 12px;
48        animation: body-breathe 6s infinite ease-in-out;
49      }
50      @keyframes body-breathe {
51        0%, 12%, 84%, 100% { transform: translateY(0); }
52        38%, 64%           { transform: translateY(-0.28px); }
53        72%                { transform: translateY(-0.12px); }
54      }
55
56      #ground-shadow {
57        transform-box: view-box;
58        transform-origin: 7.5px 15.5px;
59        animation: shadow-breathe 6s infinite ease-in-out;
60      }
61      @keyframes shadow-breathe {
62        0%, 12%, 84%, 100% { opacity: 0.5; transform: scaleX(1); }
63        38%, 64%           { opacity: 0.36; transform: scaleX(0.86); }
64        72%                { opacity: 0.44; transform: scaleX(0.94); }
65      }
66
67      /* === body 右倾下压 + hold 期 4 次微晃 (重心不稳) === */
68      .body-tilt {
69        transform-box: view-box;
70        transform-origin: 7.5px 13px;
71        animation: body-tilt 6s infinite ease-in-out;
72      }
73      @keyframes body-tilt {
74        0%, 16%, 76%, 100% { transform: rotate(0deg) scaleY(1); }
75        24%                { transform: rotate(3deg) scaleY(0.97); }
76        39%                { transform: rotate(4.5deg) scaleY(0.97); }
77        48%                { transform: rotate(2deg) scaleY(0.97); }
78        57%                { transform: rotate(4deg) scaleY(0.97); }
79        66%                { transform: rotate(3deg) scaleY(0.97); }
80      }
81
82      /* === 左两腿被挤抬起 + hold 期 6 次微抖 (用力颤抖) === */
83      .leg-left-inner {
84        transform-box: fill-box;
85        transform-origin: 50% 0%;
86        animation: leg-left-inner 6s infinite ease-in-out;
87      }
88      @keyframes leg-left-inner {
89        0%, 16%, 76%, 100% { transform: rotate(0deg); }
90        24%                { transform: rotate(12deg); }
91        36%                { transform: rotate(15deg); }
92        42%                { transform: rotate(9deg); }
93        48%                { transform: rotate(15deg); }
94        54%                { transform: rotate(9deg); }
95        60%                { transform: rotate(15deg); }
96        66%                { transform: rotate(12deg); }
97      }
98      .leg-left-outer {
99        transform-box: fill-box;
100        transform-origin: 50% 0%;
101        animation: leg-left-outer 6s infinite ease-in-out;
102      }
103      @keyframes leg-left-outer {
104        0%, 16%, 76%, 100% { transform: rotate(0deg); }
105        24%                { transform: rotate(22deg); }
106        36%                { transform: rotate(26deg); }
107        42%                { transform: rotate(19deg); }
108        48%                { transform: rotate(26deg); }
109        54%                { transform: rotate(19deg); }
110        60%                { transform: rotate(26deg); }
111        66%                { transform: rotate(22deg); }
112      }
113
114      /* === 左手: hold 期下沉 + 微晃 (配重稳平衡) === */
115      .arm-l-balance {
116        transform-box: fill-box;
117        transform-origin: 100% 0%;
118        animation: arm-l-balance 6s infinite ease-in-out;
119      }
120      @keyframes arm-l-balance {
121        0%, 16%, 76%, 100% { transform: translate(0, 0) rotate(0deg); }
122        24%                { transform: translate(0, 0.5px) rotate(-2deg); }
123        37%                { transform: translate(0, 0.55px) rotate(1deg); }
124        44%                { transform: translate(0, 0.5px) rotate(-3deg); }
125        51%                { transform: translate(0, 0.55px) rotate(2deg); }
126        58%                { transform: translate(0, 0.5px) rotate(-1deg); }
127        66%                { transform: translate(0, 0.5px) rotate(0deg); }
128      }
129
130      /* === 右手: idle → 举到 -3 → 用力多举到 -4.5 → 回落 → 放下 === */
131      .arm-r {
132        transform-origin: 13px 10px;
133        animation: arm-r 6s infinite ease-in-out;
134      }
135      @keyframes arm-r {
136        0%, 3%    { transform: none; }
137        10%, 16%  { transform: translateY(-3px) rotate(-90deg); }
138        24%, 66%  { transform: translateY(-4.5px) rotate(-90deg); }
139        76%       { transform: translateY(-3px) rotate(-90deg); }
140        80%, 100% { transform: none; }
141      }
142
143      /* === 灯泡 + rays 整组跟着右手举更高 + hold 期跟身体微摆 === */
144      .lightbulb-zone {
145        transform-box: view-box;
146        transform-origin: 0 0;
147        animation: lightbulb-zone 6s infinite ease-in-out;
148      }
149      @keyframes lightbulb-zone {
150        0%, 16%, 76%, 100% { transform: translate(0, 0); }
151        24%                { transform: translate(0, -1.5px); }
152        39%                { transform: translate(0.3px, -1.7px); }
153        48%                { transform: translate(-0.2px, -1.3px); }
154        57%                { transform: translate(0.3px, -1.6px); }
155        66%                { transform: translate(0, -1.5px); }
156      }
157
158      /* === 眼睛: rect 眼 (idle/看灯泡/眨眼) === */
159      .eyes-rect {
160        transform-box: view-box;
161        transform-origin: 7.5px 9px;
162        animation:
163          eyes-rect-move 6s infinite ease-in-out,
164          eyes-rect-vis 6s infinite step-end;
165      }
166      @keyframes eyes-rect-move {
167        0%, 11%       { transform: translate(0, 0) scaleY(1); }
168        16%, 24%      { transform: translate(1px, -0.5px) scaleY(1); }   /* 看灯泡 */
169        28%           { transform: translate(0, 0) scaleY(1); }          /* 回正中 */
170        30%           { transform: translate(0, 0) scaleY(0.1); }        /* 眨眼 */
171        72%           { transform: translate(0, 0) scaleY(0.1); }        /* 闭眼期 */
172        74%, 100%     { transform: translate(0, 0) scaleY(1); }          /* 睁开 */
173      }
174      @keyframes eyes-rect-vis {
175        0%, 30%       { opacity: 1; }
176        31%, 72%      { opacity: 0; }
177        73%, 100%     { opacity: 1; }
178      }
179
180      /* === 眼睛: ^^ 微笑眼 (灯泡 hold 期出现, 复刻 mini-happy) === */
181      .eyes-smile {
182        opacity: 0;
183        animation: eyes-smile-vis 6s infinite step-end;
184      }
185      @keyframes eyes-smile-vis {
186        0%, 30%       { opacity: 0; }
187        31%, 72%      { opacity: 1; }
188        73%, 100%     { opacity: 0; }
189      }
190
191      /* === 灯泡: 头顶固定点 pop 出现 → 8 次亮灯 → 消失 === */
192      .bulb {
193        transform-box: view-box;
194        transform-origin: 0 0;
195        opacity: 0;
196        animation: bulb-fly 6s infinite ease-in-out;
197      }
198      @keyframes bulb-fly {
199        0%, 11%   { opacity: 0; transform: translate(9.5px, -2.7px) scale(0.15); }
200        13%       { opacity: 1; transform: translate(9.5px, -2.7px) scale(0.27); }
201        16%, 66%  { opacity: 1; transform: translate(9.5px, -2.7px) scale(0.24); }
202        70%, 100% { opacity: 0; transform: translate(9.5px, -2.7px) scale(0.2); }
203      }
204
205      /* === 暗/亮玻璃: 只做一次灰色到亮起, 之后保持亮 === */
206      .bulb rect[fill="#FFB000"] { animation: glass-edge 6s infinite step-end; }
207      .bulb rect[fill="#FFD400"] { animation: glass-main 6s infinite step-end; }
208      .bulb rect[fill="#E88900"] { animation: glass-shadow 6s infinite step-end; }
209      .bulb rect[fill="#FFFFFF"],
210      .bulb rect[fill="#FFF8B8"] { animation: glass-highlight 6s infinite step-end; }
211
212      @keyframes glass-main {
213        0%, 19%   { fill: #8A7428; }
214        20%, 70%  { fill: #FFD400; }
215        71%, 100% { fill: #8A7428; }
216      }
217      @keyframes glass-edge {
218        0%, 19%   { fill: #725B20; }
219        20%, 70%  { fill: #FFB000; }
220        71%, 100% { fill: #725B20; }
221      }
222      @keyframes glass-shadow {
223        0%, 19%   { fill: #56451D; }
224        20%, 70%  { fill: #E88900; }
225        71%, 100% { fill: #56451D; }
226      }
227      @keyframes glass-highlight {
228        0%, 19%   { opacity: 0.25; }
229        20%, 70%  { opacity: 1; }
230        71%, 100% { opacity: 0.25; }
231      }
232
233      .f-anim { animation: filament-f 6s infinite step-end; }
234      @keyframes filament-f {
235        0%, 19%   { fill: #555; }
236        20%, 70%  { fill: #C96E00; }
237        71%, 100% { fill: #555; }
238      }
239
240      .fg-anim { animation: filament-fg 6s infinite step-end; }
241      @keyframes filament-fg {
242        0%, 19%   { fill: #777; }
243        20%, 70%  { fill: #E89500; }
244        71%, 100% { fill: #777; }
245      }
246
247      .rays {
248        transform-box: view-box;
249        transform-origin: 13.5px 0.5px;
250        opacity: 0;
251        animation: rays-burst 6s infinite ease-in-out;
252      }
253      @keyframes rays-burst {
254        0%, 24%   { opacity: 0; transform: translate(-0.1px, -0.1px) scale(0.65); }
255        25%, 26%  { opacity: 0.9; transform: translate(-0.1px, -0.1px) scale(0.9); }
256        27%, 28%  { opacity: 0; transform: translate(-0.1px, -0.1px) scale(0.65); }
257        30%, 31%  { opacity: 0.9; transform: translate(-0.1px, -0.1px) scale(0.95); }
258        32%, 33%  { opacity: 0; transform: translate(-0.1px, -0.1px) scale(0.65); }
259        35%, 36%  { opacity: 0.9; transform: translate(-0.1px, -0.1px) scale(0.9); }
260        37%, 38%  { opacity: 0; transform: translate(-0.1px, -0.1px) scale(0.65); }
261        40%, 41%  { opacity: 0.9; transform: translate(-0.1px, -0.1px) scale(0.95); }
262        42%, 43%  { opacity: 0; transform: translate(-0.1px, -0.1px) scale(0.65); }
263        45%, 46%  { opacity: 0.9; transform: translate(-0.1px, -0.1px) scale(0.9); }
264        47%, 48%  { opacity: 0; transform: translate(-0.1px, -0.1px) scale(0.65); }
265        50%, 51%  { opacity: 0.9; transform: translate(-0.1px, -0.1px) scale(0.95); }
266        52%, 53%  { opacity: 0; transform: translate(-0.1px, -0.1px) scale(0.65); }
267        55%, 56%  { opacity: 0.9; transform: translate(-0.1px, -0.1px) scale(0.9); }
268        57%, 60%  { opacity: 1; transform: translate(-0.1px, -0.1px) scale(0.95); }
269        61%, 100% { opacity: 0; transform: translate(-0.1px, -0.1px) scale(0.65); }
270      }
271    </style>
272  </defs>
273
274  <rect id="ground-shadow" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
275
276  <g id="master-group" transform="translate(15, 0) scale(-1, 1)">
277    <!-- 主体 + 左侧腿 (要 body-tilt) + 左手 -->
278    <g class="body-breathe">
279      <g id="accessory-anchor" class="body-tilt">
280        <!-- 左外/左内腿: 被身体右倾挤压抬起 -->
281        <rect class="leg-left-outer" x="3" y="13" width="1" height="2" fill="#DE886D"/>
282        <rect class="leg-left-inner" x="5" y="13" width="1" height="2" fill="#DE886D"/>
283
284        <!-- torso -->
285        <g class="cat-behind" fill="#DE886D">
286        <rect x="2" y="5" width="1" height="2"/><rect x="3" y="4" width="1" height="3"/>
287        <rect x="11" y="4" width="1" height="3"/><rect x="12" y="5" width="1" height="2"/>
288        <rect x="13" y="12" width="2" height="1"/><rect x="14" y="10.5" width="1" height="1.5"/>
289      </g>
290      <g class="cat-inner-ear" fill="#F2A7B0">
291        <rect x="3" y="5" width="1" height="2"/><rect x="11" y="5" width="1" height="2"/>
292      </g>
293      <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
294      <g class="cat-face">
295        <rect x="7" y="9.5" width="1" height="1" fill="#F2A7B0"/>
296        <g fill="#F5EDE6">
297          <rect x="-1" y="8" width="4" height="0.35"/><rect x="-1" y="11.3" width="4" height="0.35"/>
298          <rect x="12" y="8" width="4" height="0.35"/><rect x="12" y="11.3" width="4" height="0.35"/>
299        </g>
300      </g>
301
302        <!-- 眼睛 rect (正眼/看灯泡/眨眼) -->
303        <g class="eyes-rect" fill="#000000">
304          <rect x="4"  y="8" width="1" height="2"/>
305          <rect x="10" y="8" width="1" height="2"/>
306        </g>
307
308        <!-- 眼睛 ^^ 微笑 (灯泡 hold 期出现, 复刻 mini-happy 的 polyline 描边) -->
309        <g class="eyes-smile" fill="none" stroke="#000000" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round">
310          <polyline points="3.5,9 4.5,8 5.5,9"/>
311          <polyline points="9.5,9 10.5,8 11.5,9"/>
312        </g>
313
314        <!-- 左手 (在 body-tilt 内, 跟身体倾斜 + 自身 hold 期下沉微晃) -->
315        <rect id="mouth-anchor-right" class="arm-l-balance" x="0" y="9" width="2" height="2" fill="#DE886D"/>
316      </g>
317
318      <!-- 右内腿 (在 body-tilt 外, 独立支撑) -->
319      <rect x="9" y="13" width="1" height="2" fill="#DE886D"/>
320    </g>
321
322    <!-- 右外腿 (完全独立支撑, 不受任何 transform 影响) -->
323    <rect x="11" y="13" width="1" height="2" fill="#DE886D"/>
324
325    <!-- 灯泡 + rays 包一组, 跟右手举更高 -->
326    <g class="lightbulb-zone">
327      <g class="bulb">
328        <!-- 玻璃罩 描边橙 #FFB000 -->
329        <rect fill="#FFB000" x="12" y="2"  width="8"  height="1"/>
330        <rect fill="#FFB000" x="10" y="3"  width="12" height="1"/>
331        <rect fill="#FFB000" x="9"  y="4"  width="14" height="1"/>
332        <rect fill="#FFB000" x="8"  y="5"  width="16" height="1"/>
333        <rect fill="#FFB000" x="7"  y="6"  width="18" height="1"/>
334        <rect fill="#FFB000" x="6"  y="7"  width="20" height="1"/>
335        <rect fill="#FFB000" x="5"  y="8"  width="22" height="2"/>
336        <rect fill="#FFB000" x="4"  y="10" width="24" height="7"/>
337        <rect fill="#FFB000" x="5"  y="17" width="22" height="2"/>
338        <rect fill="#FFB000" x="6"  y="19" width="20" height="1"/>
339        <rect fill="#FFB000" x="7"  y="20" width="18" height="1"/>
340        <rect fill="#FFB000" x="8"  y="21" width="16" height="1"/>
341        <rect fill="#FFB000" x="9"  y="22" width="14" height="1"/>
342        <rect fill="#FFB000" x="10" y="23" width="12" height="1"/>
343        <rect fill="#FFB000" x="12" y="24" width="8"  height="2"/>
344
345        <!-- 玻璃罩 主体黄 #FFD400 -->
346        <rect fill="#FFD400" x="13" y="3"  width="6"  height="1"/>
347        <rect fill="#FFD400" x="11" y="4"  width="10" height="1"/>
348        <rect fill="#FFD400" x="10" y="5"  width="12" height="1"/>
349        <rect fill="#FFD400" x="9"  y="6"  width="14" height="1"/>
350        <rect fill="#FFD400" x="8"  y="7"  width="16" height="1"/>
351        <rect fill="#FFD400" x="7"  y="8"  width="18" height="2"/>
352        <rect fill="#FFD400" x="6"  y="10" width="20" height="7"/>
353        <rect fill="#FFD400" x="7"  y="17" width="18" height="2"/>
354        <rect fill="#FFD400" x="8"  y="19" width="16" height="1"/>
355        <rect fill="#FFD400" x="9"  y="20" width="14" height="1"/>
356        <rect fill="#FFD400" x="10" y="21" width="12" height="1"/>
357        <rect fill="#FFD400" x="11" y="22" width="10" height="1"/>
358        <rect fill="#FFD400" x="12" y="23" width="8"  height="1"/>
359        <rect fill="#FFD400" x="13" y="24" width="6"  height="2"/>
360
361        <!-- 玻璃罩 边缘暗橙 #E88900 -->
362        <rect fill="#E88900" x="21" y="4"  width="2" height="1"/>
363        <rect fill="#E88900" x="22" y="5"  width="1" height="2"/>
364        <rect fill="#E88900" x="24" y="8"  width="1" height="4"/>
365        <rect fill="#E88900" x="25" y="10" width="1" height="4"/>
366        <rect fill="#E88900" x="23" y="17" width="2" height="1"/>
367        <rect fill="#E88900" x="22" y="19" width="2" height="1"/>
368        <rect fill="#E88900" x="20" y="22" width="2" height="1"/>
369        <rect fill="#E88900" x="18" y="24" width="2" height="2"/>
370        <rect fill="#E88900" x="7"  y="8"  width="1" height="2"/>
371        <rect fill="#E88900" x="6"  y="17" width="1" height="1"/>
372        <rect fill="#E88900" x="8"  y="20" width="1" height="1"/>
373        <rect fill="#E88900" x="10" y="23" width="1" height="1"/>
374
375        <!-- 高光 -->
376        <rect fill="#FFFFFF" x="13" y="4"  width="2" height="1"/>
377        <rect fill="#FFF8B8" x="12" y="5"  width="1" height="2"/>
378        <rect fill="#FFFFFF" x="11" y="7"  width="2" height="1"/>
379        <rect fill="#FFF8B8" x="10" y="8"  width="1" height="1"/>
380        <rect fill="#FFF8B8" x="9"  y="10" width="1" height="2"/>
381
382        <!-- 灯丝 -->
383        <rect class="f-anim"  x="13" y="12" width="2" height="1"/>
384        <rect class="f-anim"  x="18" y="12" width="2" height="1"/>
385        <rect class="f-anim"  x="13" y="13" width="1" height="3"/>
386        <rect class="f-anim"  x="19" y="13" width="1" height="3"/>
387        <rect class="fg-anim" x="14" y="14" width="1" height="2"/>
388        <rect class="fg-anim" x="18" y="14" width="1" height="2"/>
389        <rect class="f-anim"  x="15" y="15" width="3" height="1"/>
390        <rect class="fg-anim" x="15" y="16" width="1" height="2"/>
391        <rect class="fg-anim" x="17" y="16" width="1" height="2"/>
392        <rect class="f-anim"  x="16" y="18" width="1" height="7"/>
393
394        <!-- 灯口 -->
395        <rect fill="#2E2E2E" x="11" y="25" width="10" height="1"/>
396        <rect fill="#2E2E2E" x="12" y="26" width="1"  height="1"/>
397        <rect fill="#9B9B9B" x="13" y="26" width="2"  height="1"/>
398        <rect fill="#D7D7D7" x="15" y="26" width="4"  height="1"/>
399        <rect fill="#2E2E2E" x="19" y="26" width="1"  height="1"/>
400        <rect fill="#2E2E2E" x="11" y="27" width="1"  height="1"/>
401        <rect fill="#9B9B9B" x="12" y="27" width="3"  height="1"/>
402        <rect fill="#D7D7D7" x="15" y="27" width="4"  height="1"/>
403        <rect fill="#666666" x="19" y="27" width="1"  height="1"/>
404        <rect fill="#2E2E2E" x="20" y="27" width="1"  height="1"/>
405        <rect fill="#2E2E2E" x="12" y="28" width="1"  height="1"/>
406        <rect fill="#9B9B9B" x="13" y="28" width="2"  height="1"/>
407        <rect fill="#D7D7D7" x="15" y="28" width="4"  height="1"/>
408        <rect fill="#2E2E2E" x="19" y="28" width="1"  height="1"/>
409        <rect fill="#2E2E2E" x="11" y="29" width="1"  height="1"/>
410        <rect fill="#9B9B9B" x="12" y="29" width="3"  height="1"/>
411        <rect fill="#D7D7D7" x="15" y="29" width="4"  height="1"/>
412        <rect fill="#666666" x="19" y="29" width="1"  height="1"/>
413        <rect fill="#2E2E2E" x="20" y="29" width="1"  height="1"/>
414        <rect fill="#2E2E2E" x="12" y="30" width="1"  height="1"/>
415        <rect fill="#9B9B9B" x="13" y="30" width="2"  height="1"/>
416        <rect fill="#D7D7D7" x="15" y="30" width="4"  height="1"/>
417        <rect fill="#2E2E2E" x="19" y="30" width="1"  height="1"/>
418        <rect fill="#2E2E2E" x="13" y="31" width="6"  height="1"/>
419        <rect fill="#2E2E2E" x="14" y="32" width="4"  height="1"/>
420      </g>
421
422      <!-- 放射线 12 条 (v7 重排, 上下严格对称, 中心 (13.5, 0.5) 接近灯泡玻璃罩中心) -->
423      <g class="rays" fill="#FFFFFF">
424        <!-- 主方向 上 (2 像素长条) -->
425        <rect x="13" y="-5" width="1" height="1"/>
426        <rect x="13" y="-4" width="1" height="1"/>
427        <!-- 主方向 下 (2 像素长条) -->
428        <rect x="13" y="4"  width="1" height="1"/>
429        <rect x="13" y="5"  width="1" height="1"/>
430        <!-- 主方向 左 (2 像素长条) -->
431        <rect x="6"  y="0"  width="1" height="1"/>
432        <rect x="7"  y="0"  width="1" height="1"/>
433        <!-- 主方向 右 (2 像素长条) -->
434        <rect x="19" y="0"  width="1" height="1"/>
435        <rect x="20" y="0"  width="1" height="1"/>
436        <!-- 对角 4 个单像素点 -->
437        <rect x="9"  y="-3" width="1" height="1"/>
438        <rect x="17" y="-3" width="1" height="1"/>
439        <rect x="9"  y="3"  width="1" height="1"/>
440        <rect x="17" y="3"  width="1" height="1"/>
441      </g>
442    </g>
443
444    <!-- 右手: body-breathe → body-tilt → arm-r 三层嵌套 (跟身体微呼吸 + 身体右倾 + 自己举起多举) -->
445    <g class="body-breathe">
446      <g class="body-tilt">
447        <g class="arm-r" fill="#DE886D">
448          <rect x="13" y="9" width="2" height="2"/>
449        </g>
450      </g>
451    </g>
452  </g>
453</svg>