whiskers-happy.svg
1<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500"> 2 <defs> 3 <style> 4 /* Bouncing Character Body */ 5 .bounce-anim { 6 transform-box: fill-box; 7 transform-origin: 50% 100%; /* Base of the feet */ 8 animation: bounce 1s infinite ease-in-out; 9 } 10 11 /* Ground Shadow Pulse */ 12 .shadow-anim { 13 transform-box: fill-box; 14 transform-origin: 50% 50%; 15 animation: shadow 1s infinite ease-in-out; 16 } 17 18 /* Enthusiastic Waving Arms */ 19 .arm-l { 20 transform-box: fill-box; 21 transform-origin: 100% 50%; /* Shoulder joint */ 22 animation: wave-l 0.15s infinite alternate ease-in-out; 23 } 24 .arm-r { 25 transform-box: fill-box; 26 transform-origin: 0% 50%; /* Shoulder joint */ 27 animation: wave-r 0.15s infinite alternate ease-in-out; 28 } 29 30 /* Happy Blinking Eyes */ 31 .eyes-blink { 32 transform-box: fill-box; 33 transform-origin: 50% 50%; 34 animation: blink 2s infinite linear; 35 } 36 37 /* Pixel-Art Sparkle Animations (Frame-by-frame style) */ 38 .spark-center { 39 opacity: 0; 40 animation: flash-center 1.5s infinite step-end; 41 animation-delay: var(--delay, 0s); 42 } 43 44 .spark-outer { 45 opacity: 0; 46 animation: flash-outer 1.5s infinite step-end; 47 animation-delay: var(--delay, 0s); 48 } 49 50 /* Character Keyframes */ 51 @keyframes bounce { 52 0%, 15%, 100% { transform: translateY(0) scaleY(1); } 53 20% { transform: translateY(0) scaleY(0.85); } /* Anticipation squash */ 54 40% { transform: translateY(-10px) scaleY(1.05); } /* Fast up + stretch */ 55 50% { transform: translateY(-12px) scaleY(1); } /* Hangtime peak */ 56 60% { transform: translateY(-10px) scaleY(1.05); } /* Fast fall + stretch */ 57 80% { transform: translateY(0) scaleY(0.85); } /* Landing squash */ 58 85% { transform: translateY(0) scaleY(1); } /* Recover */ 59 } 60 61 @keyframes shadow { 62 0%, 15%, 100% { transform: scale(1); opacity: 0.5; } 63 20% { transform: scale(1.1); opacity: 0.6; } 64 40% { transform: scale(0.6); opacity: 0.2; } 65 50% { transform: scale(0.5); opacity: 0.15; } 66 60% { transform: scale(0.6); opacity: 0.2; } 67 80% { transform: scale(1.1); opacity: 0.6; } 68 85% { transform: scale(1); opacity: 0.5; } 69 } 70 71 @keyframes wave-l { 72 0% { transform: rotate(45deg); } 73 100% { transform: rotate(85deg); } 74 } 75 76 @keyframes wave-r { 77 0% { transform: rotate(-45deg); } 78 100% { transform: rotate(-85deg); } 79 } 80 81 @keyframes blink { 82 0%, 46%, 54%, 100% { transform: scaleY(1); } 83 50% { transform: scaleY(0.1); } 84 } 85 86 /* 87 True 8-Bit Sparkle Timeline: 88 1. Small center dot appears 89 2. Outer arms appear (Full Star) 90 3. Center dot disappears (Hollow Ring) 91 4. Everything disappears 92 */ 93 @keyframes flash-center { 94 0% { opacity: 0; } 95 10% { opacity: 1; } /* Small dot */ 96 30% { opacity: 0; } /* Disappears, leaving hollow star */ 97 100%{ opacity: 0; } 98 } 99 100 @keyframes flash-outer { 101 0% { opacity: 0; } 102 20% { opacity: 1; } /* Outer arms appear to complete the star */ 103 40% { opacity: 0; } /* Entire star disappears */ 104 100%{ opacity: 0; } 105 } 106 </style> 107 108 <!-- Reusable Pixel Art Sparkle Definition --> 109 <g id="px-sparkle"> 110 <!-- Center pixel --> 111 <rect class="spark-center" x="-0.5" y="-0.5" width="1" height="1" /> 112 <!-- Outer 4 pixels forming the cross --> 113 <path class="spark-outer" d="M -0.5,-1.5 h1 v1 h-1 z 114 M -0.5,0.5 h1 v1 h-1 z 115 M -1.5,-0.5 h1 v1 h-1 z 116 M 0.5,-0.5 h1 v1 h-1 z" /> 117 </g> 118 </defs> 119 120 <!-- Ground Shadow --> 121 <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000"/> 122 123 <!-- Pixel-Art Sparkle Particles Group --> 124 <g class="sparkles"> 125 <use href="#px-sparkle" x="-4" y="-2" fill="#FFD700" style="--delay: 0.0s"/> 126 <use href="#px-sparkle" x="18" y="-4" fill="#FFA000" style="--delay: 0.3s"/> 127 <use href="#px-sparkle" x="20" y="10" fill="#FFF59D" style="--delay: 0.6s"/> 128 <use href="#px-sparkle" x="-6" y="12" fill="#FFC107" style="--delay: 0.9s"/> 129 <use href="#px-sparkle" x="7" y="-8" fill="#FFF59D" style="--delay: 1.2s"/> 130 <use href="#px-sparkle" x="-2" y="6" fill="#FFD700" style="--delay: 0.7s"/> 131 </g> 132 133 <!-- Main Animated Character --> 134 <g class="bounce-anim"> 135 <!-- Body Color Group --> 136 <g id="body-color-group" fill="#DE886D"> 137 <!-- Legs (Move and squash with the body naturally) --> 138 <rect id="outer-left-leg" x="3" y="13" width="1" height="2"/> 139 <rect id="inner-left-leg" x="5" y="13" width="1" height="2"/> 140 <rect id="inner-right-leg" x="9" y="13" width="1" height="2"/> 141 <rect id="outer-right-leg" x="11" y="13" width="1" height="2"/> 142 143 <!-- Main Torso --> 144 <g class="cat-behind" fill="#DE886D"> 145 <rect x="2" y="5" width="1" height="2"/><rect x="3" y="4" width="1" height="3"/> 146 <rect x="11" y="4" width="1" height="3"/><rect x="12" y="5" width="1" height="2"/> 147 <rect x="13" y="12" width="2" height="1"/><rect x="14" y="10.5" width="1" height="1.5"/> 148 </g> 149 <g class="cat-inner-ear" fill="#F2A7B0"> 150 <rect x="3" y="5" width="1" height="2"/><rect x="11" y="5" width="1" height="2"/> 151 </g> 152 <rect id="torso" x="2" y="6" width="11" height="7"/> 153 <g class="cat-face"> 154 <rect x="7" y="9.5" width="1" height="1" fill="#F2A7B0"/> 155 <g fill="#F5EDE6"> 156 <rect x="-1" y="8" width="4" height="0.35"/><rect x="-1" y="11.3" width="4" height="0.35"/> 157 <rect x="12" y="8" width="4" height="0.35"/><rect x="12" y="11.3" width="4" height="0.35"/> 158 </g> 159 </g> 160 161 <!-- Waving Arms --> 162 <g class="arm-l"> 163 <rect id="left-arm" x="0" y="9" width="2" height="2"/> 164 </g> 165 <g class="arm-r"> 166 <rect id="right-arm" x="13" y="9" width="2" height="2"/> 167 </g> 168 </g> 169 170 <!-- Eyes Color Group --> 171 <g class="eyes-blink" fill="#000000"> 172 <rect id="left-eye" x="4" y="8" width="1" height="2"/> 173 <rect id="right-eye" x="10" y="8" width="1" height="2"/> 174 </g> 175 </g> 176</svg>