docs/flamingo.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible"> <style>
  @keyframes rotate-top-1 {
  0% {
  transform: rotate(0deg);
  }
  33% {
  transform: translate(1.3px, 0.3px) rotate(5deg);
  }
  66% {
  transform: translate(0px, 0px) rotate(0deg);
  }
  100% {
  transform: rotate(0deg);
  }
  }

  #flamingo-top-1 {
  animation-name:rotate-top-1;
  animation-duration:2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  }
</style>

  <g id="flamingo-1" style="transform:translate(0%, 0%) scaleX(1);">
    <svg width="600" height="300" viewBox="0 0 200 100" fill="none" overflow="visible">
      <g id="shadow" transform="translate(0, 26)">
        <rect y="2" width="13" height="4" fill="#2B4447" fill-opacity="0.1"/>
        <rect x="1" y="1" width="11" height="1" fill="#2B4447" fill-opacity="0.1"/>
        <rect x="1" y="6" width="11" height="1" fill="#2B4447" fill-opacity="0.1"/>
        <rect x="2" width="9" height="1" fill="#2B4447" fill-opacity="0.1"/>
        <rect x="2" y="7" width="9" height="1" fill="#2B4447" fill-opacity="0.1"/>
      </g>

      <g id="flamingo-leg" transform="translate(6, 18)">
        <rect width="2" height="1" transform="matrix(1 0 0 -1 0 12)" fill="#FC9866"/>
        <rect width="1" height="12" transform="matrix(1 0 0 -1 0 12)" fill="#FC9866"/>
        <rect x="1" y="3" width="1" height="1" fill="#FC9866"/>
        <rect x="2" y="4" width="1" height="1" fill="#FC9866"/>
        <rect x="3" y="5" width="1" height="1" fill="#FC9866"/>
        <rect x="2" y="6" width="1" height="1" fill="#FC9866"/>
        <rect x="1" y="6" width="1" height="1" fill="#FC9866"/>
      </g>

      <g id="flamingo-top-1">
        <g id="flamingo-head" transform="translate(9, 5)">
          <rect x="2" y="11" width="3" height="3" fill="#FF4375"/>
          <rect x="2" y="8" width="2" height="3" fill="#FF4375"/>
          <rect x="1" y="7" width="2" height="1" fill="#FF4375"/>
          <rect y="5" width="2" height="2" fill="#FF4375"/>
          <rect y="4" width="1" height="1" fill="#FF4375"/>
          <rect y="3" width="2" height="1" fill="#FF4375"/>
          <rect x="1" y="2" width="2" height="1" fill="#FF4375"/>
          <rect x="2" width="4" height="3" fill="#FF4375"/>
          <rect x="5" y="1" width="2" height="2" fill="#FFA713"/>
          <rect x="6" y="1" width="1" height="3" fill="#FFA713"/>
          <rect x="6" y="3" width="1" height="1" fill="black"/>
          <rect x="3" y="1" width="1" height="1" fill="black"/>
          <rect x="5" width="1" height="1" fill="black"/>
          <rect x="2" y="7" width="1" height="2" fill="#FF4375"/>
          <rect x="1" y="6" width="1" height="2" fill="#FF4375"/>
          <rect y="3" width="1" height="3" fill="#FF4375"/>
          <rect x="1" y="1" width="1" height="3" fill="#FF4375"/>
          <rect x="3" y="10" width="1" height="2" fill="#FF4375"/>
        </g>
        <g id="flamingo-body" transform="translate(1, 13)">
          <rect x="3" width="5" height="6" fill="#FF4375"/>
          <rect x="1" y="2" width="9" height="2" fill="#FF4375"/>
          <rect x="1" y="1" width="3" height="3" fill="#FF4375"/>
          <rect x="3" y="4" width="8" height="2" fill="#FF4375"/>
          <rect x="5" y="5" width="7" height="2" fill="#FF4375"/>
          <rect x="6" y="6" width="4" height="2" fill="#FF82A3"/>
          <rect y="1" width="1" height="1" fill="#DE3865"/>
          <rect x="1" y="2" width="1" height="2" fill="#DE3865"/>
          <rect x="2" y="4" width="1" height="1" fill="#DE3865"/>
          <rect x="3" y="5" width="1" height="1" fill="#DE3865"/>
          <rect x="4" y="6" width="2" height="1" fill="#DE3865"/>
          <rect width="2" height="1" transform="matrix(-1 0 0 1 12 6)" fill="#DE3865"/>
          <rect width="4" height="1" transform="matrix(-1 0 0 1 10 7)" fill="#DE3865"/>
          <rect x="8" y="1" width="1" height="1" fill="#FF4375"/>
          <rect x="4" y="5" width="5" height="1" fill="#FF82A3"/>
          <rect x="5" y="4" width="3" height="1" fill="#FF82A3"/>
        </g>
      </g>
    </svg>
  </g>
  <style>
    #level {
    filter: url(#level_shadow)
    }
  </style>

  <defs>
    <filter id="level_shadow" x="-200" y="-200" width="400" height="400" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
      <feOffset/>
      <feGaussianBlur stdDeviation="0.5"/>
      <feComposite in2="hardAlpha" operator="out"/>
      <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_138_125"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_138_125" result="shape"/>
    </filter>
  </defs></svg>