docs/little-chick-spring.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible"><style>
  @keyframes little-chick-move-head {
  0% {
  -webkit-transform:translate(6px, -2px) rotate(0deg);
  -ms-transform:translate(6px, -2px) rotate(0deg);
  -o-transform:translate(6px, -2px) rotate(0deg);
  -moz-transform:translate(6px, -2px) rotate(0deg);
  transform:translate(6px, -2px) rotate(0deg);
  }
  50% {
  -webkit-transform:translate(8px, -2.2px) rotate(21deg);
  -ms-transform:translate(8px, -2.2px) rotate(21deg);
  -o-transform:translate(8px, -2.2px) rotate(21deg);
  -moz-transform:translate(8px, -2.2px) rotate(21deg);
  transform:translate(8px, -2.2px) rotate(21deg);
  }
  100% {
  -webkit-transform:translate(6px, -2px) rotate(0deg);
  -ms-transform:translate(6px, -2px) rotate(0deg);
  -o-transform:translate(6px, -2px) rotate(0deg);
  -moz-transform:translate(6px, -2px) rotate(0deg);
  transform:translate(6px, -2px) rotate(0deg);
  }
  }

  @keyframes little-chick-move-leg {
  0% {
  -webkit-transform:translate(2px, 6px) rotate(0deg);
  -ms-transform:translate(2px, 6px) rotate(0deg);
  -o-transform:translate(2px, 6px) rotate(0deg);
  -moz-transform:translate(2px, 6px) rotate(0deg);
  transform:translate(2px, 6px) rotate(0deg);
  }
  50% {
  -webkit-transform:translate(2px, 6px) rotate(3deg);
  -ms-transform:translate(2px, 6px) rotate(3deg);
  -o-transform:translate(2px, 6px) rotate(3deg);
  -moz-transform:translate(2px, 6px) rotate(3deg);
  transform:translate(2px, 6px) rotate(3deg);
  }
  100% {
  -webkit-transform:translate(2px, 6px) rotate(0deg);
  -ms-transform:translate(2px, 6px) rotate(0deg);
  -o-transform:translate(2px, 6px) rotate(0deg);
  -moz-transform:translate(2px, 6px) rotate(0deg);
  transform:translate(2px, 6px) rotate(0deg);
  }
  }

  @keyframes move-14-logo {
  0% {
  -webkit-transform:translate(0px, -2.2px) rotate(0deg);
  -ms-transform:translate(0px, -2.2px) rotate(0deg);
  -o-transform:translate(0px, -2.2px) rotate(0deg);
  -moz-transform:translate(0px, -2.2px) rotate(0deg);
  transform:translate(-1px, -3.2px) rotate(0deg);
  }
  50% {
  -webkit-transform:translate(0px, -2.4px) rotate(14deg);
  -ms-transform:translate(0px, -2.4px) rotate(14deg);
  -o-transform:translate(0px, -2.4px) rotate(14deg);
  -moz-transform:translate(0px, -2.4px) rotate(14deg);
  transform:translate(-1px, -3.4px) rotate(14deg);
  }
  100% {
  -webkit-transform:translate(0px, -2.2px) rotate(0deg);
  -ms-transform:translate(0px, -2.2px) rotate(0deg);
  -o-transform:translate(0px, -2.2px) rotate(0deg);
  -moz-transform:translate(0px, -2.2px) rotate(0deg);
  transform:translate(-1px, -3.2px) rotate(0deg);
  }
  }

  #little-chick-head {
  animation-name:little-chick-move-head;
  animation-duration:1s;
  animation-iteration-count:infinite;
  }

  #little-chick-leg {
  animation-name:little-chick-move-leg;
  animation-duration:0.5s;
  animation-iteration-count:360;
  animation-timing-function: ease-in;
  }

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

  <g id="little-chick-14" transform="translate(10, 10)">
    <svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 300 150" fill="none" overflow="visible">
      <g id="little-chick-shadow" transform="translate(-2, 2)">
        <rect width="12" height="3" transform="matrix(0.707107 0.707107 0.707107 -0.707107 1.41422 2.12132)" fill="#6F6F6F" fill-opacity="0.1"/>
        <rect width="10" height="1" transform="matrix(0.707107 0.707107 0.707107 -0.707107 1.41422 3.53553)" fill="#6F6F6F" fill-opacity="0.1"/>
        <rect width="8" height="1" transform="matrix(0.707107 0.707107 0.707107 -0.707107 1.41422 4.94975)" fill="#6F6F6F" fill-opacity="0.1"/>
      </g>

      <g id="little-chick-leg" transform="translate(2, 6)">
        <rect width="2" height="2" fill="#FF6F0F"/>
        <rect x="1" y="1" width="2" height="1" fill="#FF6F0F"/>
      </g>

      <g id="little-chick-body">
        <rect width="6" height="1" transform="matrix(-1 0 0 1 7 4)" fill="#FFD600"/>
        <rect x="3" y="5" width="5" height="2" fill="white"/>
        <rect x="3" y="5" width="5" height="2" fill="#FFD600"/>
        <rect width="9" height="3" transform="matrix(-1 0 0 1 12 4)" fill="#FFD600"/>
        <rect width="6" height="1" transform="matrix(-1 0 0 1 11 8)" fill="#FFD600"/>
        <rect width="7" height="1" transform="matrix(-1 0 0 1 11 7)" fill="#FFD600"/>
        <rect width="4" height="1" transform="matrix(-1 0 0 1 10 9)" fill="#FFD600"/>
        <rect width="6" height="1" transform="matrix(-1 0 0 1 7 1)" fill="#FFD600"/>
        <rect width="1" height="1" transform="matrix(-1 0 0 1 3 5)" fill="#FFD600"/>
        <rect width="3" height="1" transform="matrix(-1 0 0 1 5 0)" fill="#FFD600"/>
        <rect width="7" height="2" transform="matrix(-1 0 0 1 7 2)" fill="#FFD600"/>
        <rect x="1" y="2" width="5" height="2" fill="white"/>
        <rect x="1" y="2" width="5" height="2" fill="#FFD600"/>
        <rect x="2" y="1" width="3" height="2" fill="white"/>
        <rect x="2" y="1" width="3" height="2" fill="#FFD600"/>
        <rect x="2" y="3" width="5" height="2" fill="white"/>
        <rect x="2" y="3" width="5" height="2" fill="#FFD600"/>
        <rect x="4" y="2" width="7" height="5" fill="white"/>
        <rect x="4" y="2" width="7" height="5" fill="#FFD600"/>
        <rect x="5" y="7" width="5" height="1" fill="white"/>
        <rect x="5" y="7" width="5" height="1" fill="#FFD600"/>
        <rect x="6" y="8" width="4" height="1" fill="white"/>
        <rect x="6" y="8" width="4" height="1" fill="#FFD600"/>
      </g>

      <g id="little-chick-head" transform="translate(6,-2)">
        <rect x="1" y="1" width="4" height="6" fill="#FFD600"/>
        <rect x="2" y="3" width="1" height="1" fill="black"/>
        <rect x="4" y="2" width="1" height="1" fill="black"/>
        <rect width="1" height="4" transform="matrix(-1 0 0 1 1 1)" fill="#FFD600"/>
        <rect width="1" height="1" transform="matrix(-1 0 0 1 5 1)" fill="#FFD600"/>
        <rect width="1" height="4" transform="matrix(-1 0 0 1 6 2)" fill="#FFD600"/>
        <rect width="3" height="1" transform="matrix(-1 0 0 1 4 0)" fill="#FFD600"/>
        <rect x="4" y="4" width="2" height="2" fill="#FF6F0F"/>
        <rect x="5" y="5" width="2" height="1" fill="#FF6F0F"/>
      </g>

      <g id="spring-14-logo" transform="translate(3, 3)">
        <rect x="2.84032" y="7.15613" width="1.47368" height="2.21053" transform="rotate(-18 2.84032 7.15613)" fill="#6DB33F"/>
        <rect x="2.25339" y="7.73425" width="0.736842" height="1.84211" transform="rotate(-18 2.25339 7.73425)" fill="#6DB33F"/>
        <rect x="2.8226" y="9.48615" width="0.368421" height="0.368421" transform="rotate(-18 2.8226 9.48615)" fill="#6DB33F"/>
        <rect x="1.903" y="7.84811" width="0.368421" height="2.57895" transform="rotate(-18 1.903 7.84811)" fill="#6DB33F"/>
        <rect x="1.66643" y="8.31235" width="0.368421" height="2.57895" transform="rotate(-18 1.66643 8.31235)" fill="#6DB33F"/>
        <rect x="2.91878" y="12.1666" width="0.368421" height="0.736842" transform="rotate(-18 2.91878 12.1666)" fill="#6DB33F"/>
        <rect x="7.35115" y="11.5012" width="0.736842" height="0.368421" transform="rotate(-18 7.35115 11.5012)" fill="#6DB33F"/>
        <rect x="7.93806" y="10.9231" width="0.368421" height="0.368421" transform="rotate(-18 7.93806 10.9231)" fill="#6DB33F"/>
        <rect x="8.06075" y="10.1085" width="0.368421" height="0.736842" transform="rotate(-18 8.06075 10.1085)" fill="#6DB33F"/>
        <rect x="8.06961" y="8.94348" width="0.368421" height="1.10526" transform="rotate(-18 8.06961 8.94348)" fill="#6DB33F"/>
        <rect x="7.38652" y="6.84116" width="0.368421" height="1.10526" transform="rotate(-18 7.38652 6.84116)" fill="#6DB33F"/>
        <rect x="6.69456" y="5.90384" width="0.368421" height="1.10526" transform="rotate(-18 6.69456 5.90384)" fill="#6DB33F"/>
        <rect x="6.45804" y="6.36804" width="0.368421" height="0.368421" transform="rotate(-18 6.45804 6.36804)" fill="#6DB33F"/>
        <rect x="8.07846" y="7.77847" width="0.368421" height="1.10526" transform="rotate(-18 8.07846 7.77847)" fill="#6DB33F"/>
        <rect x="3.2603" y="13.2178" width="4.78947" height="0.368421" transform="rotate(-18 3.2603 13.2178)" fill="#6DB33F"/>
        <rect x="3.383" y="12.4032" width="1.47368" height="0.736842" transform="rotate(-18 3.383 12.4032)" fill="#6DB33F"/>
        <rect x="4.42535" y="13.2266" width="3.31579" height="0.368421" transform="rotate(-18 4.42535 13.2266)" fill="#6DB33F"/>
        <rect x="5.23994" y="13.3493" width="1.84211" height="0.368421" transform="rotate(-18 5.23994 13.3493)" fill="#6DB33F"/>
        <rect x="4.6707" y="11.5974" width="1.10526" height="0.736842" transform="rotate(-18 4.6707 11.5974)" fill="#6DB33F"/>
        <rect x="5.60806" y="10.9054" width="0.736842" height="0.368421" transform="rotate(-18 5.60806 10.9054)" fill="#6DB33F"/>
        <rect x="6.19496" y="10.3273" width="0.368421" height="0.368421" transform="rotate(-18 6.19496 10.3273)" fill="#6DB33F"/>
        <rect x="6.4315" y="9.86313" width="0.368421" height="0.368421" transform="rotate(-18 6.4315 9.86313)" fill="#6DB33F"/>
        <rect x="6.66806" y="9.39886" width="0.368421" height="0.368421" transform="rotate(-18 6.66806 9.39886)" fill="#6DB33F"/>
        <rect x="6.79076" y="8.58423" width="0.368421" height="0.736842" transform="rotate(-18 6.79076 8.58423)" fill="#6DB33F"/>
        <rect x="1.42992" y="8.77658" width="0.368421" height="4.78947" transform="rotate(-18 1.42992 8.77658)" fill="#6DB33F"/>
        <rect x="1.19336" y="9.24081" width="0.368421" height="3.68421" transform="rotate(-18 1.19336 9.24081)" fill="#6DB33F"/>
        <rect x="1.07066" y="10.0554" width="0.368421" height="2.21053" transform="rotate(-18 1.07066 10.0554)" fill="#6DB33F"/>
        <rect x="2.48993" y="7.26999" width="0.368421" height="0.368421" transform="rotate(-18 2.48993 7.26999)" fill="#6DB33F"/>
        <rect x="4.24188" y="6.70078" width="0.736842" height="1.84211" transform="rotate(-18 4.24188 6.70078)" fill="#6DB33F"/>
        <rect x="5.05649" y="6.82346" width="0.736842" height="1.10526" transform="rotate(-18 5.05649 6.82346)" fill="#6DB33F"/>
        <rect x="5.87114" y="6.94617" width="0.736842" height="0.368421" transform="rotate(-18 5.87114 6.94617)" fill="#6DB33F"/>
        <path d="M9.55942 8.65925L9.20278 8.77513L8.97102 8.06184L9.32766 7.94596L9.21178 7.58931L10.995 7.00991L11.1109 7.36655L9.68431 7.83008L9.91607 8.54337L10.986 8.19573L11.1019 8.55237L11.4585 8.43649L11.6903 9.14978L11.3337 9.26567L11.4495 9.62231L9.6663 10.2017L9.55042 9.84507L10.977 9.38155L10.7452 8.66825L9.67531 9.0159L9.55942 8.65925ZM13.6074 6.55538L13.9641 6.4395L14.5435 8.22273L14.1868 8.33861L14.3027 8.69526L13.2328 9.0429L13.5804 10.1128L12.8671 10.3446L11.7083 6.77814L13.4915 6.19874L13.6074 6.55538ZM13.8302 8.4545L13.2508 6.67126L12.5375 6.90303L13.1169 8.68626L13.8302 8.4545ZM14.5615 5.85109L15.2748 5.61933L15.5065 6.33262L15.8632 6.21674L15.9791 6.57339L15.6224 6.68927L16.0859 8.11585L15.3726 8.34762L14.5615 5.85109ZM16.7014 5.1558L16.9331 5.8691L15.8632 6.21674L15.7473 5.86009L16.1039 5.74421L15.9881 5.38757L16.7014 5.1558ZM18.7253 4.10387L18.0121 4.33563L17.7803 3.62234L18.4936 3.39058L18.7253 4.10387ZM19.5365 6.60039L20.2498 6.36863L20.3657 6.72528L18.2258 7.42057L18.1099 7.06392L18.8232 6.83216L18.2438 5.04893L17.5305 5.28069L17.4146 4.92404L18.8412 4.46052L19.5365 6.60039ZM22.1669 3.77423L22.5236 3.65835L23.2189 5.79823L22.5056 6.02999L21.8103 3.89011L21.097 4.12187L21.7923 6.26175L21.079 6.49351L20.2678 3.99699L22.051 3.41758L22.1669 3.77423ZM24.1729 5.09394L23.8163 5.20982L23.2369 3.42659L23.5935 3.3107L23.4776 2.95406L25.2609 2.37465L26.3038 5.58447L25.9471 5.70035L26.063 6.05699L24.2798 6.6364L24.1639 6.27976L25.5905 5.81623L25.3587 5.10294L24.2888 5.45058L24.1729 5.09394ZM25.2429 4.74629L24.6634 2.96306L23.9502 3.19482L24.5296 4.97805L25.2429 4.74629Z" fill="#6DB33F"/>
      </g>
    </svg>
  </g>
</svg>