1<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
2 <defs>
3 <style>
4 /* 5-Second Yawn — One-shot, ends in squashed/eyes-closed pose */
5 .action-body {
6 transform-origin: 7.5px 13px;
7 animation: action-body-yawn 3.8s ease-in-out forwards;
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-yawn 3.8s ease-in-out forwards;
18 }
19
20 .arm-l {
21 transform-origin: 1px 10px;
22 animation: arm-l-yawn 3.8s ease-in-out forwards;
23 }
24
25 .arm-r {
26 transform-origin: 14px 10px;
27 animation: arm-r-yawn 3.8s ease-in-out forwards;
28 }
29
30 .eyes-look {
31 animation: eye-track-yawn 3.8s ease-in-out forwards;
32 }
33
34 .eyes-blink {
35 transform-origin: 7.5px 9px;
36 animation: eye-blink-yawn 3.8s linear forwards;
37 }
38
39 .yawn-mouth {
40 transform-origin: 7.5px 11px;
41 animation: yawn-mouth-anim 3.8s ease-in-out forwards;
42 opacity: 0;
43 }
44
45 .yawn-tear {
46 animation: tear-fall 3.8s ease-in-out forwards;
47 opacity: 0;
48 }
49
50 /* --- Keyframes --- */
51
52 @keyframes breathe {
53 0%, 100% { transform: scale(1, 1) translate(0, 0); }
54 50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
55 }
56
57 /* Body: neutral → stretch up → peak → squash down (hold from 78%) */
58 @keyframes action-body-yawn {
59 0%, 12% { transform: scale(1, 1) translate(0, 0); }
60 32% { transform: scale(0.95, 1.05) translate(0, -1px); }
61 50% { transform: scale(0.9, 1.1) translate(0, -2px); }
62 78%, 100% { transform: scale(1.05, 0.95) translate(0, 1px); }
63 }
64
65 @keyframes shadow-yawn {
66 0%, 12% { transform: scaleX(1); opacity: 0.5; }
67 32% { transform: scaleX(0.95); opacity: 0.45; }
68 50% { transform: scaleX(0.9); opacity: 0.4; }
69 78%, 100% { transform: scaleX(1.05); opacity: 0.55; }
70 }
71
72 /* Eyes look slightly up during stretch, then neutral */
73 @keyframes eye-track-yawn {
74 0%, 18% { transform: translate(0, 0); }
75 32%, 68% { transform: translate(0, -1px); }
76 82%, 100% { transform: translate(0, 0); }
77 }
78
79 /* Blink once, then eyes shut for the yawn and stay shut */
80 @keyframes eye-blink-yawn {
81 0%, 18% { transform: scaleY(1); }
82 24% { transform: scaleY(0.1); }
83 30% { transform: scaleY(1); }
84 42%, 100% { transform: scaleY(0.1); }
85 }
86
87 /* Both arms stretch outward during yawn, then relax down */
88 @keyframes arm-l-yawn {
89 0%, 12% { transform: translate(0, 0) rotate(0deg); }
90 38% { transform: translate(-1px, -2px) rotate(45deg); }
91 50% { transform: translate(-2px, -3px) rotate(80deg); }
92 78%, 100% { transform: translate(0, 1px) rotate(-15deg); }
93 }
94
95 @keyframes arm-r-yawn {
96 0%, 12% { transform: translate(0, 0) rotate(0deg); }
97 38% { transform: translate(1px, -2px) rotate(-45deg); }
98 50% { transform: translate(2px, -3px) rotate(-80deg); }
99 78%, 100% { transform: translate(0, 1px) rotate(15deg); }
100 }
101
102 /* Mouth opens wide then closes */
103 @keyframes yawn-mouth-anim {
104 0%, 18% { opacity: 0; transform: scale(0.1); }
105 32% { opacity: 1; transform: scale(0.5, 0.2); }
106 50% { opacity: 1; transform: scale(1.1, 1.4); }
107 68% { opacity: 1; transform: scale(0.6, 0.4); }
108 80%, 100% { opacity: 0; transform: scale(0.1); }
109 }
110
111 /* Tiny tear slides down during peak yawn */
112 @keyframes tear-fall {
113 0%, 45% { opacity: 0; transform: translateY(0); }
114 50% { opacity: 1; transform: translateY(0); }
115 68% { opacity: 1; transform: translateY(2.5px); }
116 80%, 100% { opacity: 0; transform: translateY(3px); }
117 }
118 </style>
119 </defs>
120
121 <!-- Ground Shadow -->
122 <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
123
124 <!-- Static Legs -->
125 <g id="legs" fill="#DE886D">
126 <rect x="3" y="12" width="1" height="3"/>
127 <rect x="5" y="12" width="1" height="3"/>
128 <rect x="9" y="12" width="1" height="3"/>
129 <rect x="11" y="12" width="1" height="3"/>
130 </g>
131
132 <!-- Animated Upper Body -->
133 <g class="action-body">
134 <g class="breathe-anim">
135 <!-- Torso -->
136 <g class="cat-behind" fill="#DE886D">
137 <rect x="2" y="5" width="1" height="2"/><rect x="3" y="4" width="1" height="3"/>
138 <rect x="11" y="4" width="1" height="3"/><rect x="12" y="5" width="1" height="2"/>
139 <rect x="13" y="12" width="2" height="1"/><rect x="14" y="10.5" width="1" height="1.5"/>
140 </g>
141 <g class="cat-inner-ear" fill="#F2A7B0">
142 <rect x="3" y="5" width="1" height="2"/><rect x="11" y="5" width="1" height="2"/>
143 </g>
144 <rect id="torso" x="2" y="6" width="11" height="7" fill="#DE886D"/>
145 <g class="cat-face">
146 <rect x="7" y="9.5" width="1" height="1" fill="#F2A7B0"/>
147 <g fill="#F5EDE6">
148 <rect x="-1" y="8" width="4" height="0.35"/><rect x="-1" y="11.3" width="4" height="0.35"/>
149 <rect x="12" y="8" width="4" height="0.35"/><rect x="12" y="11.3" width="4" height="0.35"/>
150 </g>
151 </g>
152 <!-- Left Arm -->
153 <g class="arm-l">
154 <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
155 </g>
156 <!-- Right Arm -->
157 <g class="arm-r">
158 <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
159 </g>
160 <!-- Yawning Mouth (hidden initially) -->
161 <rect class="yawn-mouth" x="6" y="10" width="3" height="2" fill="#000000"/>
162 <!-- Eyes -->
163 <g class="eyes-look" fill="#000000">
164 <g class="eyes-blink">
165 <rect x="4" y="8" width="1" height="2"/>
166 <rect x="10" y="8" width="1" height="2"/>
167 </g>
168 </g>
169 <!-- Tear -->
170 <rect class="yawn-tear" x="3.5" y="10" width="1" height="1" fill="#40C4FF"/>
171 </g>
172 </g>
173</svg>
whiskers-yawning.svg