docs/slime-blue.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible">
  <style>
    @keyframes slime-14-move-body {
    0% {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -moz-transform: scaleY(1);
    transform: scaleY(1);
    }
    70% {
    -webkit-transform: scaleY(0.9);
    -ms-transform: scaleY(0.9);
    -o-transform: scaleY(0.9);
    -moz-transform: scaleY(0.9);
    transform: scaleY(0.9);
    }
    100% {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -moz-transform: scaleY(1);
    transform: scaleY(1);
    }
    }

    #slime-14-body {
    animation-name:slime-14-move-body;
    animation-duration:1s;
    animation-iteration-count:infinite;
    }

    @keyframes slime-14-move-shadow {
    0% {
    -webkit-transform: translate(0px, 6px) scaleY(1);
    -ms-transform: translate(0px, 6px) scaleY(1);
    -o-transform: translate(0px, 6px) scaleY(1);
    -moz-transform: translate(0px, 6px) scaleY(1);
    transform: translate(0px, 6px) scaleY(1);
    }
    70% {
    -webkit-transform: translate(0px, 6px) scaleY(1.1);
    -ms-transform: translate(0px, 6px) scaleY(1.1);
    -o-transform: translate(0px, 6px) scaleY(1.1);
    -moz-transform: translate(0px, 6px) scaleY(1.1);
    transform: translate(0px, 6px) scaleY(1.1);
    }
    100% {
    -webkit-transform: translate(0px, 6px) scaleY(1);
    -ms-transform: translate(0px, 6px) scaleY(1);
    -o-transform: translate(0px, 6px) scaleY(1);
    -moz-transform: translate(0px, 6px) scaleY(1);
    transform: translate(0px, 6px) scaleY(1);
    }
    }

    #slime-14-shadow {
    animation-name:slime-2-move-shadow;
    animation-duration:1s;
    animation-iteration-count:infinite;
    }
  </style>

  <g id="slime-14">
    <svg width="600" height="300" viewBox="0 0 200 100" fill="none" overflow="visible">
      <g id="slime-14-shadow" transform="translate(0, 6)">
        <rect width="13.3359" height="3.89813"
          transform="matrix(1 2.26611e-08 -2.79767e-08 -1 0 6.56531)" fill="#2B4447"
          fill-opacity="0.1"/>
        <rect width="11.1133" height="1.29938"
          transform="matrix(1 2.94396e-08 -2.1535e-08 -1 1.11133 7.86469)" fill="#2B4447"
          fill-opacity="0.1"/>
        <rect width="11.1133" height="1.29938"
          transform="matrix(1 2.94396e-08 -2.1535e-08 -1 1.14059 2.63298)" fill="#2B4447"
          fill-opacity="0.1"/>
        <rect width="8.89062" height="1.29938"
          transform="matrix(1 2.94396e-08 -2.1535e-08 -1 2.22266 9.16408)" fill="#2B4447"
          fill-opacity="0.1"/>
        <rect width="8.89062" height="1.29938"
          transform="matrix(1 2.94396e-08 -2.1535e-08 -1 2.28119 1.29938)" fill="#2B4447"
          fill-opacity="0.1"/>
      </g>

      <g id="slime-14-body">
        <rect x="5" y="1" width="4" height="1" fill="#3791FF"/>
        <rect x="11" y="3" width="1" height="1" fill="#3791FF"/>
        <rect x="2" y="11" width="10" height="1" fill="#3791FF"/>
        <rect x="1" y="10" width="12" height="1" fill="#3791FF"/>
        <rect x="1" y="4" width="12" height="1" fill="#3791FF"/>
        <rect x="2" y="2" width="9" height="2" fill="#3791FF"/>
        <rect x="3" width="2" height="2" fill="#3791FF"/>
        <rect y="5" width="14" height="5" fill="#3791FF"/>
        <rect x="7" y="7" width="1" height="2" fill="black"/>
        <rect x="11" y="7" width="1" height="2" fill="black"/>
        <rect x="1" y="9" width="1" height="2" fill="#327FDD"/>
        <rect x="2" y="10" width="1" height="1" fill="#327FDD"/>
        <rect y="8" width="1" height="2" fill="#327FDD"/>
        <rect x="2" y="11" width="10" height="1" fill="#327FDD"/>
      </g>
    </svg>
  </g>
</svg>