whiskers.git / assets / whiskers / whiskers-dozing.svg
whiskers-dozing.svg87 lines · 3.0 KB · raw
1<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
2  <defs>
3    <style>
4      /* Dozing — looping gentle breathing in yawn-end squashed pose, eyes shut */
5      .doze-body {
6        transform-origin: 7.5px 13px;
7        animation: doze-breathe 4s infinite ease-in-out;
8      }
9
10      .doze-shadow {
11        transform-origin: 7.5px 15.5px;
12        animation: doze-shadow 4s infinite ease-in-out;
13      }
14
15      .eyes-shut {
16        transform-origin: 7.5px 9px;
17        transform: scaleY(0.1);
18        transition: transform 0.3s ease-out;
19      }
20
21      .arm-l-doze {
22        transform-origin: 1px 10px;
23        transform: translate(0px, 1px) rotate(-15deg);
24      }
25
26      .arm-r-doze {
27        transform-origin: 14px 10px;
28        transform: translate(0px, 1px) rotate(15deg);
29      }
30
31      @keyframes doze-breathe {
32        0%, 100% { transform: scale(1.05, 0.95) translate(0, 1px); }
33        50% { transform: scale(1.08, 0.92) translate(0, 1.8px); }
34      }
35
36      @keyframes doze-shadow {
37        0%, 100% { transform: scaleX(1.05); opacity: 0.55; }
38        50% { transform: scaleX(1.08); opacity: 0.5; }
39      }
40    </style>
41  </defs>
42
43  <!-- Ground Shadow -->
44  <rect class="doze-shadow" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.55"/>
45
46  <!-- Static Legs -->
47  <g id="legs" fill="#DE886D">
48    <rect x="3" y="12" width="1" height="3"/>
49    <rect x="5" y="12" width="1" height="3"/>
50    <rect x="9" y="12" width="1" height="3"/>
51    <rect x="11" y="12" width="1" height="3"/>
52  </g>
53
54  <!-- Dozing Body (squashed yawn-end pose + gentle breathing) -->
55  <g id="accessory-anchor" class="doze-body">
56    <!-- Torso -->
57    <g class="cat-behind" fill="#DE886D">
58        <rect x="2" y="5" width="1" height="2"/><rect x="3" y="4" width="1" height="3"/>
59        <rect x="11" y="4" width="1" height="3"/><rect x="12" y="5" width="1" height="2"/>
60        <rect x="13" y="12" width="2" height="1"/><rect x="14" y="10.5" width="1" height="1.5"/>
61      </g>
62      <g class="cat-inner-ear" fill="#F2A7B0">
63        <rect x="3" y="5" width="1" height="2"/><rect x="11" y="5" width="1" height="2"/>
64      </g>
65      <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
66      <g class="cat-face">
67        <rect x="7" y="9.5" width="1" height="1" fill="#F2A7B0"/>
68        <g fill="#F5EDE6">
69          <rect x="-1" y="8" width="4" height="0.35"/><rect x="-1" y="11.3" width="4" height="0.35"/>
70          <rect x="12" y="8" width="4" height="0.35"/><rect x="12" y="11.3" width="4" height="0.35"/>
71        </g>
72      </g>
73    <!-- Left Arm (relaxed down) -->
74    <g class="arm-l-doze">
75      <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
76    </g>
77    <!-- Right Arm (relaxed down) -->
78    <g class="arm-r-doze">
79      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
80    </g>
81    <!-- Eyes shut (JS can open via style.transform override) -->
82    <g id="eyes-doze" class="eyes-shut" fill="#000000">
83      <rect x="4" y="8" width="1" height="2"/>
84      <rect x="10" y="8" width="1" height="2"/>
85    </g>
86  </g>
87</svg>