docs/dessert-fox.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible">
  <style>
    @keyframes dessert-fox-14-leg-left-move {
    0% {
    transform: translate(5px, 5px);
    }
    50% {
    transform: translate(5px, 5px) rotate(10deg);
    }
    100% {
    transform: translate(5px, 5px);
    }
    }

    @keyframes dessert-fox-14-leg-right-move {
    0% {
    transform: translate(8px, 5px);
    }
    50% {
    transform: translate(8px, 5px) rotate(-10deg);
    }
    100% {
    transform: translate(8px, 5px);
    }
    }

    @keyframes dessert-fox-14-head-move {
    0% {
    transform: translate(0px, -5px) rotate(0deg);
    }
    50% {
    transform: translate(2px, -6px) rotate(10deg);
    }
    100% {
    transform: translate(0px, -5px) rotate(0deg);
    }
    }

    @keyframes dessert-fox-14-obj-move {
    0% {
    transform: translate(0, 0px);
    }
    15% {
    transform: translate(0, -2.5px);
    }
    30% {
    transform: translate(0, 0px);
    }
    100% {
    transform: translate(0, 0px);
    }
    }

    @keyframes dessert-fox-14-shadow-move {
    0% {
    transform: translate(3px, 7px) scaleX(1);
    }
    15% {
    transform: translate(3px, 7px) scaleX(1.2);
    }
    30% {
    transform: translate(3px, 7px) scaleX(1);
    }
    100% {
    transform: translate(3px, 7px) scaleX(1);
    }
    }

    #dessert-fox-14-shadow {
    animation-name: dessert-fox-14-shadow-move;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-timing-function: ease-in-out;
    }

    #dessert-fox-14-obj {
    animation-name: dessert-fox-14-obj-move;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-timing-function: ease-in-out;
    }

    #dessert-fox-14-leg-left {
    animation-name: dessert-fox-14-leg-left-move;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-timing-function: ease-in-out;
    }

    #dessert-fox-14-leg-right {
    animation-name: dessert-fox-14-leg-right-move;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-timing-function: ease-in-out;
    }

    #dessert-fox-14-head {
    animation-name: dessert-fox-14-head-move;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-timing-function: ease-in-out;
    }
  </style>

  <g id="dessert-fox-14" transform="translate(10, 30)">
    <svg width="600" height="300" viewBox="0 0 200 100" fill="none" overflow="visible">
      <g id="dessert-fox-14-shadow" transform="translate(3, 12)">
        <rect width="8" height="1" transform="matrix(-1 0 0 1 8 0.5)" fill="#2B4447" fill-opacity="0.1"/>
        <rect width="6.76923" height="0.25" transform="matrix(-1 0 0 1 7.38452 0.25)" fill="#2B4447" fill-opacity="0.1"/>
        <rect width="6.76923" height="0.25" transform="matrix(-1 0 0 1 7.38452 1.5)" fill="#2B4447" fill-opacity="0.1"/>
        <rect width="5.53846" height="0.25" transform="matrix(-1 0 0 1 6.76929 0)" fill="#2B4447" fill-opacity="0.1"/>
        <rect width="5.53846" height="0.25" transform="matrix(-1 0 0 1 6.76929 1.75)" fill="#2B4447" fill-opacity="0.1"/>
      </g>
      <g id="dessert-fox-14-obj">
        <g id="dessert-fox-14-leg-left" transform="translate(5, 10)">
          <rect width="2" height="3" fill="#DDD7B5"/>
        </g>
        <g id="dessert-fox-14-leg-right" transform="translate(8, 10)">
          <rect width="2" height="3" fill="#DDD7B5"/>
        </g>
        <g id="dessert-fox-14-body" transform="translate(-2, 2)">
          <rect x="2" y="2" width="3" height="1" fill="#F5F5F7"/>
          <rect x="3" y="3" width="3" height="1" fill="#F5F5F7"/>
          <rect y="3" width="2" height="1" fill="#F5F5F7"/>
          <rect x="3" y="2" width="8" height="1" fill="#DDD7B5"/>
          <rect x="7" width="6" height="4" fill="#DDD7B5"/>
          <rect x="7" y="2" width="6" height="2" fill="#DDD7B5"/>
          <rect x="4" y="2" width="8" height="2" fill="#DDD7B5"/>
          <rect x="6" y="1" width="7" height="3" fill="#DDD7B5"/>
          <rect x="6" y="3" width="7" height="2" fill="#DDD7B5"/>
          <rect x="9" y="2" width="3" height="3" fill="#F5F5F7"/>
          <rect x="8" y="3" width="3" height="2" fill="#F5F5F7"/>
          <rect x="7" y="4" width="3" height="1" fill="#F5F5F7"/>
          <rect x="2" y="1" width="2" height="1" fill="#DDD7B5"/>
          <rect x="1" y="2" width="1" height="1" fill="#DDD7B5"/>
          <rect y="3" width="1" height="1" fill="#DDD7B5"/>
          <rect x="4" y="3" width="2" height="1" fill="black" fill-opacity="0.1"/>
          <rect x="6" y="4" width="2" height="1" fill="black" fill-opacity="0.1"/>
          <rect x="3" y="2" width="1" height="1" fill="black" fill-opacity="0.1"/>
        </g>
        <g id="dessert-fox-14-head" transform="translate(0, 0)">
          <rect x="7" y="2" width="4" height="5" fill="#DDD7B5"/>
          <rect x="9" y="5" width="2" height="2" fill="#F5F5F7"/>
          <rect x="6" y="3" width="6" height="4" fill="#DDD7B5"/>
          <rect x="8" y="6" width="4" height="1" fill="#F5F5F7"/>
          <rect x="8" y="6" width="3" height="2" fill="#F5F5F7"/>
          <rect x="6" y="3" width="6" height="1" fill="#DDD7B5"/>
          <rect x="3" y="4" width="12" height="1" fill="#DDD7B5"/>
          <rect x="5" y="3" width="8" height="3" fill="#DDD7B5"/>
          <rect x="7" y="7" width="4" height="1" fill="#DDD7B5"/>
          <rect x="1" y="2" width="4" height="1" fill="#DDD7B5"/>
          <rect y="1" width="4" height="1" fill="#DDD7B5"/>
          <rect x="1" width="2" height="3" fill="#DDD7B5"/>
          <rect x="1" y="1" width="2" height="1" fill="#FBB3BE"/>
          <rect x="2" y="1" width="1" height="2" fill="#FBB3BE"/>
          <rect x="2" y="2" width="2" height="2" fill="#FBB3BE"/>
          <rect x="3" y="3" width="2" height="2" fill="#FBB3BE"/>
          <rect x="3" y="4" width="3" height="1" fill="#FBB3BE"/>
          <rect x="13" y="2" width="4" height="1" fill="#DDD7B5"/>
          <rect x="14" y="1" width="4" height="1" fill="#DDD7B5"/>
          <rect x="15" width="2" height="3" fill="#DDD7B5"/>
          <rect x="15" y="1" width="2" height="1" fill="#FBB3BE"/>
          <rect x="15" y="1" width="1" height="2" fill="#FBB3BE"/>
          <rect x="14" y="2" width="2" height="2" fill="#FBB3BE"/>
          <rect x="13" y="3" width="2" height="2" fill="#FBB3BE"/>
          <rect x="12" y="4" width="3" height="1" fill="#FBB3BE"/>
          <rect x="10" y="6" width="1" height="1" fill="black"/>
          <rect x="8" y="4" width="1" height="2" fill="black"/>
          <rect x="7" y="7" width="4" height="1" fill="#F5F5F7"/>
          <rect x="9" y="5" width="3" height="1" fill="#F5F5F7"/>
          <rect x="11" y="4" width="1" height="2" fill="black"/>
          <rect x="7" y="7" width="2" height="1" fill="black" fill-opacity="0.1"/>
          <rect x="6" y="6" width="1" height="1" fill="black" fill-opacity="0.1"/>
        </g>
      </g>
    </svg>
  </g>
</svg>