whiskers.git / assets / whiskers / whiskers-error.svg
whiskers-error.svg109 lines · 3.6 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      .body-exhausted {
5        transform-origin: 7.5px 15px;
6        animation: heavy-breathe 2.5s infinite ease-in-out;
7      }
8      .arm-fan {
9        transform-origin: 14px 10px;
10        animation: fan-self 0.4s infinite alternate ease-in-out;
11      }
12      .smoke {
13        opacity: 0;
14        animation: puff-smoke 3s infinite ease-out;
15      }
16      .sm1 { animation-delay: 0s; }
17      .sm2 { animation-delay: 1s; }
18      .sm3 { animation-delay: 2s; }
19
20      /* Error warning flash */
21      .error-warning {
22        animation: error-flash 0.8s infinite ease-in-out;
23      }
24
25      @keyframes heavy-breathe {
26        0%, 100% { transform: scale(1, 1) translateY(0); }
27        50% { transform: scale(1.05, 0.9) translateY(1.5px); }
28      }
29      @keyframes fan-self {
30        0% { transform: rotate(0deg); }
31        100% { transform: rotate(-60deg); }
32      }
33      @keyframes puff-smoke {
34        0% { transform: translate(7.5px, 6px) scale(0.5); opacity: 0; }
35        20% { opacity: 0.6; }
36        100% { transform: translate(7.5px, -15px) scale(2); opacity: 0; }
37      }
38      @keyframes error-flash {
39        0%, 100% { opacity: 1; }
40        50% { opacity: 0.15; }
41      }
42    </style>
43    <g id="smoke-puff">
44      <rect x="-1" y="-1" width="2" height="2" fill="#B0BEC5" rx="0.5"/>
45      <rect x="0" y="-2" width="2" height="2" fill="#CFD8DC" rx="0.5"/>
46    </g>
47  </defs>
48
49  <rect id="ground-shadow" x="-1" y="15" width="17" height="1" fill="#000000" opacity="0.5"/>
50
51  <!-- Smoke -->
52  <g>
53    <use href="#smoke-puff" class="smoke sm1"/>
54    <use href="#smoke-puff" class="smoke sm2" transform="translate(-2, 0)"/>
55    <use href="#smoke-puff" class="smoke sm3" transform="translate(2, 0)"/>
56  </g>
57
58  <g id="accessory-anchor" class="body-exhausted">
59    <!-- Sploot Legs -->
60    <g fill="#DE886D">
61      <rect x="3" y="9" width="1" height="1"/>
62      <rect x="5" y="9" width="1" height="1"/>
63      <rect x="9" y="9" width="1" height="1"/>
64      <rect x="11" y="9" width="1" height="1"/>
65    </g>
66
67    <!-- Torso Sploot -->
68    <g fill="#DE886D">
69      <g class="cat-behind" fill="#DE886D">
70        <rect x="2" y="9" width="1" height="2"/><rect x="3" y="8" width="1" height="3"/>
71        <rect x="11" y="8" width="1" height="3"/><rect x="12" y="9" width="1" height="2"/>
72        
73      </g>
74      <g class="cat-inner-ear" fill="#F2A7B0">
75        <rect x="3" y="9" width="1" height="2"/><rect x="11" y="9" width="1" height="2"/>
76      </g>
77      <rect x="1" y="10" width="13" height="5"/>
78      <g class="cat-face">
79        <rect x="7" y="12.8" width="1" height="1" fill="#F2A7B0"/>
80        <g fill="#F5EDE6">
81          <rect x="-1" y="11.5" width="4" height="0.35"/><rect x="-1" y="14.2" width="4" height="0.35"/>
82          <rect x="12" y="11.5" width="4" height="0.35"/><rect x="12" y="14.2" width="4" height="0.35"/>
83        </g>
84      </g>
85      <rect x="-1" y="13" width="2" height="2"/>
86    </g>
87
88    <!-- Fanning Arm (closer to body) -->
89    <g class="arm-fan">
90      <rect x="13" y="11" width="2" height="2" fill="#DE886D"/>
91    </g>
92
93    <!-- XX Eyes -->
94    <g fill="#000000">
95      <!-- Left X -->
96      <rect x="3" y="12" width="0.6" height="2.2" transform="rotate(45 3.3 13.1)"/>
97      <rect x="3" y="12" width="0.6" height="2.2" transform="rotate(-45 3.3 13.1)"/>
98      <!-- Right X -->
99      <rect x="10" y="12" width="0.6" height="2.2" transform="rotate(45 10.3 13.1)"/>
100      <rect x="10" y="12" width="0.6" height="2.2" transform="rotate(-45 10.3 13.1)"/>
101    </g>
102  </g>
103
104  <!-- Error Warning (flashing) -->
105  <g class="error-warning">
106    <!-- Error text only -->
107    
108  </g>
109</svg>