whiskers.git / assets / whiskers / whiskers-looking.svg
whiskers-looking.svg130 lines · 4.7 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      /* 10-Second Idle Loop — Looking Around + Scratching (no yawn) */
5      .action-body {
6        transform-origin: 7.5px 13px;
7        animation: action-body 10s infinite ease-in-out;
8      }
9
10      .breathe-anim {
11        transform-origin: 7.5px 13px;
12        animation: breathe 3.2s infinite ease-in-out;
13      }
14
15      .shadow-anim {
16        transform-origin: 7.5px 15.5px;
17        animation: shadow-action 10s infinite ease-in-out;
18      }
19
20      .arm-l {
21        transform-origin: 1px 10px;
22        animation: arm-l-idle 10s infinite ease-in-out;
23      }
24
25      .eyes-look {
26        animation: eye-track 10s infinite ease-in-out;
27      }
28
29      .eyes-blink {
30        transform-origin: 7.5px 9px;
31        animation: eye-blink 10s infinite linear;
32      }
33
34      /* --- Keyframes --- */
35
36      @keyframes breathe {
37        0%, 100% { transform: scale(1, 1) translate(0, 0); }
38        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
39      }
40
41      @keyframes action-body {
42        0%, 8%, 25%, 30%, 40%, 45%, 60%, 100% { transform: scale(1,1) translate(0,0); }
43        /* Look Right */
44        12%, 22% { transform: scale(1,1) translate(1px, 0); }
45        /* Look Left */
46        48%, 57% { transform: scale(1,1) translate(-1px, 0); }
47        /* Scratch Lean */
48        33%, 38% { transform: scale(1,1) translate(0.5px, 0); }
49      }
50
51      @keyframes shadow-action {
52        0%, 8%, 25%, 30%, 40%, 45%, 60%, 100% { transform: scaleX(1) translate(0,0); opacity: 0.5; }
53        12%, 22% { transform: scaleX(1) translate(1px, 0); opacity: 0.5; }
54        48%, 57% { transform: scaleX(1) translate(-1px, 0); opacity: 0.5; }
55        33%, 38% { transform: scaleX(1) translate(0.5px, 0); opacity: 0.5; }
56      }
57
58      @keyframes eye-track {
59        0%, 10%, 25%, 43%, 60%, 100% { transform: translate(0, 0); }
60        12%, 22% { transform: translate(3px, 0); }  /* Look Right */
61        48%, 57% { transform: translate(-3px, 0); }  /* Look Left */
62      }
63
64      @keyframes eye-blink {
65        0%, 3%, 7%, 18%, 22%, 47%, 51%, 78%, 82%, 100% { transform: scaleY(1); }
66        5%, 20%, 49%, 80% { transform: scaleY(0.1); }
67      }
68
69      @keyframes arm-l-idle {
70        0%, 30% { transform: translate(0,0) rotate(0deg); }
71        /* Scratching Sequence */
72        33% { transform: translate(1px, -3px) rotate(15deg); }
73        34% { transform: translate(1.5px, -4px) rotate(35deg); }
74        35% { transform: translate(0.5px, -2.5px) rotate(0deg); }
75        36% { transform: translate(1.5px, -4px) rotate(35deg); }
76        37% { transform: translate(0.5px, -2.5px) rotate(0deg); }
77        38% { transform: translate(1.5px, -4px) rotate(35deg); }
78        39% { transform: translate(0.5px, -2.5px) rotate(0deg); }
79        42%, 100% { transform: translate(0,0) rotate(0deg); }
80      }
81    </style>
82  </defs>
83
84  <!-- Ground Shadow -->
85  <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
86
87  <!-- Static Legs -->
88  <g id="legs" fill="#DE886D">
89    <rect x="3" y="12" width="1" height="3"/>
90    <rect x="5" y="12" width="1" height="3"/>
91    <rect x="9" y="12" width="1" height="3"/>
92    <rect x="11" y="12" width="1" height="3"/>
93  </g>
94
95  <!-- Animated Upper Body -->
96  <g class="action-body">
97    <g class="breathe-anim">
98      <!-- Torso -->
99      <g class="cat-behind" fill="#DE886D">
100        <rect x="2" y="5" width="1" height="2"/><rect x="3" y="4" width="1" height="3"/>
101        <rect x="11" y="4" width="1" height="3"/><rect x="12" y="5" width="1" height="2"/>
102        <rect x="13" y="12" width="2" height="1"/><rect x="14" y="10.5" width="1" height="1.5"/>
103      </g>
104      <g class="cat-inner-ear" fill="#F2A7B0">
105        <rect x="3" y="5" width="1" height="2"/><rect x="11" y="5" width="1" height="2"/>
106      </g>
107      <rect id="torso" x="2" y="6" width="11" height="7" fill="#DE886D"/>
108      <g class="cat-face">
109        <rect x="7" y="9.5" width="1" height="1" fill="#F2A7B0"/>
110        <g fill="#F5EDE6">
111          <rect x="-1" y="8" width="4" height="0.35"/><rect x="-1" y="11.3" width="4" height="0.35"/>
112          <rect x="12" y="8" width="4" height="0.35"/><rect x="12" y="11.3" width="4" height="0.35"/>
113        </g>
114      </g>
115      <!-- Left Arm (scratches) -->
116      <g class="arm-l">
117        <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
118      </g>
119      <!-- Right Arm (static) -->
120      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
121      <!-- Eyes -->
122      <g class="eyes-look" fill="#000000">
123        <g class="eyes-blink">
124          <rect x="4" y="8" width="1" height="2"/>
125          <rect x="10" y="8" width="1" height="2"/>
126        </g>
127      </g>
128    </g>
129  </g>
130</svg>