@mumulinya167/ccm-pet-assets 2.0.0

package/assets/clawd/clawd-sleeping.svg

@@ -0,0 +1,118 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* Slow, rhythmic deep breathing animation */
+      .breathe {
+        transform-origin: 7.5px 15px; /* Pivot at the floor to expand upwards */
+        animation: breathe-squash 4.5s infinite ease-in-out;
+      }
+
+      /* Shadow expands slightly as the body inflates */
+      .shadow-breathe {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-pulse 4.5s infinite ease-in-out;
+      }
+
+      /* Zzz Particle Base Styles */
+      .z-particle {
+        opacity: 0;
+      }
+      .z1 { animation: float-1 6s infinite ease-in-out; animation-delay: 0s; }
+      .z2 { animation: float-2 6s infinite ease-in-out; animation-delay: 2s; }
+      .z3 { animation: float-3 6s infinite ease-in-out; animation-delay: 4s; }
+
+      /* Breathing Keyframes (Slow inhale, hold, exhale, pause) */
+      @keyframes breathe-squash {
+        0%, 80%, 100% { transform: scale(1, 1); }
+        30%, 40% { transform: scale(1.02, 1.25); } /* Chest expands/inflates */
+      }
+
+      @keyframes shadow-pulse {
+        0%, 80%, 100% { transform: scaleX(1); opacity: 0.4; }
+        30%, 40% { transform: scaleX(1.05); opacity: 0.5; }
+      }
+
+      /* Swaying and fading floating Z keyframes (Adjusted for lowered head) */
+      @keyframes float-1 {
+        0%   { transform: translate(5px, 8px) scale(0.4); opacity: 0; }
+        10%  { opacity: 1; }
+        30%  { transform: translate(9px, 4px) scale(0.6); }
+        50%  { transform: translate(4px, 0px) scale(0.8); }
+        70%  { transform: translate(8px, -4px) scale(1.0); }
+        90%  { opacity: 0.8; }
+        100% { transform: translate(6px, -8px) scale(1.1); opacity: 0; }
+      }
+
+      @keyframes float-2 {
+        0%   { transform: translate(8px, 9px) scale(0.3); opacity: 0; }
+        10%  { opacity: 1; }
+        30%  { transform: translate(5px, 5px) scale(0.5); }
+        50%  { transform: translate(9px, 1px) scale(0.7); }
+        70%  { transform: translate(6px, -3px) scale(0.9); }
+        90%  { opacity: 0.8; }
+        100% { transform: translate(8px, -7px) scale(1.0); opacity: 0; }
+      }
+
+      @keyframes float-3 {
+        0%   { transform: translate(6px, 7px) scale(0.5); opacity: 0; }
+        10%  { opacity: 1; }
+        30%  { transform: translate(9px, 3px) scale(0.7); }
+        50%  { transform: translate(4px, -1px) scale(0.9); }
+        70%  { transform: translate(8px, -5px) scale(1.1); }
+        90%  { opacity: 0.8; }
+        100% { transform: translate(5px, -9px) scale(1.2); opacity: 0; }
+      }
+    </style>
+
+    <!-- Pixel Art "Z" Definitions -->
+    <g id="pixel-z">
+      <rect x="0" y="0" width="4" height="1" />
+      <rect x="2" y="1" width="1" height="1" />
+      <rect x="1" y="2" width="1" height="1" />
+      <rect x="0" y="3" width="4" height="1" />
+    </g>
+    
+    <g id="pixel-z-small">
+      <rect x="0" y="0" width="3" height="1" />
+      <rect x="1" y="1" width="1" height="1" />
+      <rect x="0" y="2" width="3" height="1" />
+    </g>
+  </defs>
+
+  <!-- Ground Shadow (Widened for the splooted posture) -->
+  <rect id="ground-shadow" class="shadow-breathe" x="-1" y="15" width="17" height="1" fill="#000000" />
+
+  <!-- Floating Zzz Bubbles -->
+  <g class="zzz-particles">
+    <use href="#pixel-z" class="z-particle z1" fill="#90A4AE" />
+    <use href="#pixel-z-small" class="z-particle z2" fill="#B0BEC5" />
+    <use href="#pixel-z" class="z-particle z3" fill="#CFD8DC" />
+  </g>
+
+  <!-- Splooted / Melted Sleeping Pose -->
+  <g class="breathe">
+    <!-- Legs pointing up from behind (Relaxed Sploot) -->
+    <g fill="#DE886D">
+      <rect id="outer-left-leg-up" x="3" y="9" width="1" height="1"/>
+      <rect id="inner-left-leg-up" x="5" y="9" width="1" height="1"/>
+      <rect id="inner-right-leg-up" x="9" y="9" width="1" height="1"/>
+      <rect id="outer-right-leg-up" x="11" y="9" width="1" height="1"/>
+    </g>
+
+    <!-- Squashed Body Resting on the Floor -->
+    <g fill="#DE886D">
+      <!-- Main flattened torso -->
+      <rect id="torso-sploot" x="1" y="10" width="13" height="5"/>
+      
+      <!-- Arms spread flat on the ground -->
+      <rect id="left-arm-sploot" x="-1" y="13" width="2" height="2"/>
+      <rect id="right-arm-sploot" x="14" y="13" width="2" height="2"/>
+    </g>
+    
+    <!-- Ultra-Thin Shut Eyes (Dashes) -->
+    <g fill="#000000">
+      <rect id="left-eye-shut" x="3.5" y="12.5" width="2" height="0.4"/>
+      <rect id="right-eye-shut" x="9.5" y="12.5" width="2" height="0.4"/>
+    </g>
+  </g>
+</svg>

package/assets/clawd/clawd-static-base.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 16" width="300" height="320">
+  <rect id="ground-shadow" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+  
+  <g id="master-group">
+    <g id="body-color-group" fill="#DE886D">
+      <rect id="torso" x="2" y="6" width="11" height="7"/>
+      <rect id="left-arm" x="0" y="9" width="2" height="2"/>
+      <rect id="right-arm" x="13" y="9" width="2" height="2"/>
+      
+      <rect id="outer-left-leg" x="3" y="13" width="1" height="2"/>
+      <rect id="inner-left-leg" x="5" y="13" width="1" height="2"/>
+      <rect id="inner-right-leg" x="9" y="13" width="1" height="2"/>
+      <rect id="outer-right-leg" x="11" y="13" width="1" height="2"/>
+    </g>
+    
+    <g id="eyes-color-group" fill="#000000">
+      <rect id="left-eye" x="4" y="8" width="1" height="2"/>
+      <rect id="right-eye" x="10" y="8" width="1" height="2"/>
+    </g>
+  </g>
+</svg>

package/assets/clawd/clawd-wake.svg

@@ -0,0 +1,277 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500" shape-rendering="crispEdges">
+  <defs>
+    <style>
+      .once {
+        animation-duration: 1.5s;
+        animation-fill-mode: forwards;
+        animation-iteration-count: 1;
+      }
+
+      .scale-top-left {
+        transform-box: fill-box;
+        transform-origin: top left;
+      }
+
+      .shadow {
+        transform-origin: 7.5px 15.5px;
+        animation-name: shadow-wake;
+        animation-timing-function: linear;
+      }
+
+      .body-motion {
+        transform-origin: 7.5px 15px;
+        animation-name: body-motion;
+        animation-timing-function: cubic-bezier(0.24, 0.8, 0.24, 1);
+      }
+
+      .torso-shift {
+        animation: torso-shift 1.5s linear forwards;
+      }
+
+      .torso-shape {
+        animation: torso-shape 1.5s linear forwards;
+      }
+
+      .arm-left {
+        animation: arm-left 1.5s linear forwards;
+      }
+
+      .arm-right {
+        animation: arm-right 1.5s linear forwards;
+      }
+
+      .leg-shift {
+        animation: leg-shift 1.5s linear forwards;
+      }
+
+      .leg-grow {
+        animation: leg-grow 1.5s linear forwards;
+      }
+
+      .eye-shift {
+        animation: eye-shift 1.5s linear forwards;
+      }
+
+      .eye-shape {
+        animation: eye-shape 1.5s linear forwards;
+      }
+
+      @keyframes shadow-wake {
+        0% {
+          opacity: 0.4;
+          transform: scaleX(1);
+        }
+        20% {
+          opacity: 0.47;
+          transform: scaleX(0.56);
+        }
+        33.333% {
+          opacity: 0.54;
+          transform: scaleX(0.42);
+        }
+        46.667% {
+          opacity: 0.48;
+          transform: scaleX(0.48);
+        }
+        56% {
+          opacity: 0.52;
+          transform: scaleX(0.56);
+        }
+        66.667%, 100% {
+          opacity: 0.5;
+          transform: scaleX(0.5294);
+        }
+      }
+
+      @keyframes body-motion {
+        0% {
+          transform: translate(0, 0) scale(1, 1) rotate(0deg);
+        }
+        6.667% {
+          transform: translate(0, 0.35px) scale(1.03, 0.96) rotate(0deg);
+        }
+        20% {
+          transform: translate(0, -2.6px) scale(0.98, 1.04) rotate(-6deg);
+        }
+        33.333% {
+          transform: translate(0, -4.1px) scale(0.9, 1.22) rotate(2deg);
+        }
+        46.667% {
+          transform: translate(0, -2px) scale(0.95, 1.11) rotate(0deg);
+        }
+        54% {
+          transform: translate(0, -0.55px) scale(1.02, 0.98) rotate(-4deg);
+        }
+        60% {
+          transform: translate(0, -0.2px) scale(0.99, 1.02) rotate(2.5deg);
+        }
+        66.667%, 100% {
+          transform: translate(0, 0) scale(1, 1) rotate(0deg);
+        }
+      }
+
+      @keyframes torso-shift {
+        0% {
+          transform: translate(-1px, 4px);
+        }
+        8% {
+          transform: translate(-0.82px, 3.4px);
+        }
+        20%, 100% {
+          transform: translate(0, 0);
+        }
+      }
+
+      @keyframes torso-shape {
+        0% {
+          transform: scale(1.1818, 0.7143);
+        }
+        8% {
+          transform: scale(1.14, 0.76);
+        }
+        20%, 100% {
+          transform: scale(1, 1);
+        }
+      }
+
+      @keyframes arm-left {
+        0% {
+          transform: translate(-1px, 4px);
+        }
+        8% {
+          transform: translate(-0.8px, 3.4px);
+        }
+        20%, 100% {
+          transform: translate(0, 0);
+        }
+      }
+
+      @keyframes arm-right {
+        0% {
+          transform: translate(1px, 4px);
+        }
+        8% {
+          transform: translate(0.8px, 3.4px);
+        }
+        20%, 100% {
+          transform: translate(0, 0);
+        }
+      }
+
+      @keyframes leg-shift {
+        0% {
+          transform: translate(0, -2px);
+        }
+        8% {
+          transform: translate(0, -1.5px);
+        }
+        20%, 100% {
+          transform: translate(0, 0);
+        }
+      }
+
+      @keyframes leg-grow {
+        0% {
+          transform: scale(1, 0.25);
+        }
+        8% {
+          transform: scale(1, 0.45);
+        }
+        20%, 100% {
+          transform: scale(1, 1);
+        }
+      }
+
+      @keyframes eye-shift {
+        0% {
+          transform: translate(-0.5px, 4.5px);
+        }
+        6.667% {
+          transform: translate(-0.5px, 4.15px);
+        }
+        10% {
+          transform: translate(-0.2px, 1px);
+        }
+        14% {
+          transform: translate(-0.06px, 0.2px);
+        }
+        20%, 54% {
+          transform: translate(0, 0);
+        }
+        58% {
+          transform: translate(0, 0.5px);
+        }
+        62%, 100% {
+          transform: translate(0, 0);
+        }
+      }
+
+      @keyframes eye-shape {
+        0% {
+          transform: scale(2, 0.2);
+        }
+        6.667% {
+          transform: scale(2.12, 0.12);
+        }
+        10% {
+          transform: scale(1.45, 1.8);
+        }
+        14% {
+          transform: scale(0.92, 1.08);
+        }
+        20%, 54% {
+          transform: scale(1, 1);
+        }
+        58% {
+          transform: scale(1, 0.08);
+        }
+        62% {
+          transform: scale(1, 1.08);
+        }
+        66.667%, 100% {
+          transform: scale(1, 1);
+        }
+      }
+    </style>
+  </defs>
+
+  <rect class="once shadow" x="-1" y="15" width="17" height="1" fill="#000000" opacity="0.4"/>
+
+  <g class="once body-motion">
+    <g fill="#DE886D">
+      <g class="once leg-shift">
+        <rect class="once scale-top-left leg-grow" x="3" y="11" width="1" height="4"/>
+      </g>
+      <g class="once leg-shift">
+        <rect class="once scale-top-left leg-grow" x="5" y="11" width="1" height="4"/>
+      </g>
+      <g class="once leg-shift">
+        <rect class="once scale-top-left leg-grow" x="9" y="11" width="1" height="4"/>
+      </g>
+      <g class="once leg-shift">
+        <rect class="once scale-top-left leg-grow" x="11" y="11" width="1" height="4"/>
+      </g>
+    </g>
+
+    <g class="once torso-shift">
+      <rect class="once scale-top-left torso-shape" x="2" y="6" width="11" height="7" fill="#DE886D"/>
+    </g>
+
+    <g class="once arm-left">
+      <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+
+    <g class="once arm-right">
+      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+
+    <g fill="#000000">
+      <g class="once eye-shift">
+        <rect class="once scale-top-left eye-shape" x="4" y="8" width="1" height="2"/>
+      </g>
+      <g class="once eye-shift">
+        <rect class="once scale-top-left eye-shape" x="10" y="8" width="1" height="2"/>
+      </g>
+    </g>
+  </g>
+</svg>