docs/little-chick-java.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(2px, -3.9px) rotate(0deg);
  -ms-transform:translate(2px, -3.9px) rotate(0deg);
  -o-transform:translate(2px, -3.9px) rotate(0deg);
  -moz-transform:translate(2px, -3.9px) rotate(0deg);
  transform:translate(2px, -3.9px) rotate(0deg);
  }
  50% {
  -webkit-transform:translate(2px, -4.1px) rotate(14deg);
  -ms-transform:translate(2px, -4.1px) rotate(14deg);
  -o-transform:translate(2px, -4.1px) rotate(14deg);
  -moz-transform:translate(2px, -4.1px) rotate(14deg);
  transform:translate(2px, -4.1px) rotate(14deg);
  }
  100% {
  -webkit-transform:translate(2px, -3.9px) rotate(0deg);
  -ms-transform:translate(2px, -3.9px) rotate(0deg);
  -o-transform:translate(2px, -3.9px) rotate(0deg);
  -moz-transform:translate(2px, -3.9px) rotate(0deg);
  transform:translate(2px, -3.9px) 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;
  }

  #java-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="java-14-logo" transform="translate(3, 3)">
        <rect x="4.32298" y="4.24459" width="0.454545" height="0.909091" transform="rotate(-18 4.32298 4.24459)" fill="#E2141F"/>
        <rect x="4.17162" y="5.24965" width="0.454545" height="0.909091" transform="rotate(-18 4.17162 5.24965)" fill="#E2141F"/>
        <rect x="3.87978" y="5.82241" width="0.454545" height="0.909091" transform="rotate(-18 3.87978 5.82241)" fill="#E2141F"/>
        <rect x="3.58794" y="6.39517" width="0.454545" height="0.909091" transform="rotate(-18 3.58794 6.39517)" fill="#E2141F"/>
        <rect x="3.2961" y="6.96793" width="0.454545" height="0.909091" transform="rotate(-18 3.2961 6.96793)" fill="#E2141F"/>
        <rect x="3.00427" y="7.5407" width="0.454545" height="0.909091" transform="rotate(-18 3.00427 7.5407)" fill="#E2141F"/>
        <rect x="3.71748" y="8.26483" width="0.454545" height="0.909091" transform="rotate(-18 3.71748 8.26483)" fill="#E2141F"/>
        <rect x="4.43071" y="8.98896" width="0.454545" height="0.454545" transform="rotate(-18 4.43071 8.98896)" fill="#E2141F"/>
        <rect x="5.43578" y="9.14034" width="0.454545" height="0.454545" transform="rotate(-18 5.43578 9.14034)" fill="#E2141F"/>
        <rect x="3.13382" y="9.41035" width="0.909091" height="0.454545" transform="rotate(-18 3.13382 9.41035)" fill="#0065B2"/>
        <rect x="2.82016" y="12.8578" width="0.909091" height="0.454545" transform="rotate(-18 2.82016 12.8578)" fill="#0065B2"/>
        <rect x="6.30037" y="8.85941" width="0.454545" height="0.454545" transform="rotate(-18 6.30037 8.85941)" fill="#0065B2"/>
        <rect x="7.15405" y="10.0158" width="0.454545" height="0.454545" transform="rotate(-18 7.15405 10.0158)" fill="#0065B2"/>
        <rect x="7.43498" y="10.8804" width="0.454545" height="0.454545" transform="rotate(-18 7.43498 10.8804)" fill="#0065B2"/>
        <rect x="7.16496" y="8.57849" width="0.909091" height="0.454545" transform="rotate(-18 7.16496 8.57849)" fill="#0065B2"/>
        <rect x="8.17003" y="8.72987" width="0.454545" height="0.454545" transform="rotate(-18 8.17003 8.72987)" fill="#0065B2"/>
        <rect x="7.87819" y="9.30262" width="0.454545" height="0.454545" transform="rotate(-18 7.87819 9.30262)" fill="#0065B2"/>
        <rect x="7.58635" y="9.87538" width="0.454545" height="0.454545" transform="rotate(-18 7.58635 9.87538)" fill="#0065B2"/>
        <rect x="3.55521" y="10.7072" width="0.454545" height="0.454545" transform="rotate(-18 3.55521 10.7072)" fill="#0065B2"/>
        <rect x="3.97659" y="12.0041" width="0.454545" height="0.454545" transform="rotate(-18 3.97659 12.0041)" fill="#0065B2"/>
        <rect x="3.26337" y="11.28" width="0.454545" height="0.454545" transform="rotate(-18 3.26337 11.28)" fill="#0065B2"/>
        <rect x="3.83612" y="11.5718" width="3.63636" height="0.454545" transform="rotate(-18 3.83612 11.5718)" fill="#0065B2"/>
        <rect x="4.54935" y="12.296" width="2.72727" height="0.454545" transform="rotate(-18 4.54935 12.296)" fill="#0065B2"/>
        <rect x="2.40968" y="10.1236" width="0.909091" height="0.454545" transform="rotate(-18 2.40968 10.1236)" fill="#0065B2"/>
        <rect x="2.52832" y="13.4306" width="0.454545" height="0.454545" transform="rotate(-18 2.52832 13.4306)" fill="#0065B2"/>
        <rect x="3.10109" y="13.7224" width="5.90909" height="0.454545" transform="rotate(-18 3.10109 13.7224)" fill="#0065B2"/>
        <rect x="8.58051" y="11.4641" width="0.454545" height="0.454545" transform="rotate(-18 8.58051 11.4641)" fill="#0065B2"/>
        <rect x="4.24661" y="14.3061" width="5" height="0.454545" transform="rotate(-18 4.24661 14.3061)" fill="#0065B2"/>
        <rect x="8.86142" y="12.3287" width="0.909091" height="0.454545" transform="rotate(-18 8.86142 12.3287)" fill="#0065B2"/>
        <rect x="3.41473" y="10.2749" width="3.18182" height="0.454545" transform="rotate(-18 3.41473 10.2749)" fill="#0065B2"/>
        <rect x="5.58714" y="8.13528" width="0.454545" height="0.909091" transform="rotate(-18 5.58714 8.13528)" fill="#E2141F"/>
        <rect x="5.01439" y="7.84344" width="0.454545" height="0.909091" transform="rotate(-18 5.01439 7.84344)" fill="#E2141F"/>
        <rect x="4.44162" y="7.55161" width="0.454545" height="0.909091" transform="rotate(-18 4.44162 7.55161)" fill="#E2141F"/>
        <rect x="4.73346" y="6.97885" width="0.454545" height="0.454545" transform="rotate(-18 4.73346 6.97885)" fill="#E2141F"/>
        <rect x="5.02528" y="6.40608" width="0.454545" height="0.454545" transform="rotate(-18 5.02528 6.40608)" fill="#E2141F"/>
        <rect x="5.31714" y="5.83332" width="0.454545" height="0.454545" transform="rotate(-18 5.31714 5.83332)" fill="#E2141F"/>
        <rect x="10.0154" y="7.65232" width="0.78125" height="2.73438" transform="rotate(-18 10.0154 7.65232)" fill="#E2141F"/>
        <rect x="9.99667" y="10.1228" width="1.17188" height="0.390625" transform="rotate(-18 9.99667 10.1228)" fill="#E2141F"/>
        <rect x="10.4889" y="10.3736" width="0.78125" height="0.390625" transform="rotate(-18 10.4889 10.3736)" fill="#E2141F"/>
        <rect x="9.87596" y="9.75127" width="0.390625" height="0.390625" transform="rotate(-18 9.87596 9.75127)" fill="#E2141F"/>
        <rect x="15.1978" y="8.43284" width="1.17188" height="0.78125" transform="rotate(-18 15.1978 8.43284)" fill="#E2141F"/>
        <rect x="15.8201" y="7.81992" width="0.78125" height="0.78125" transform="rotate(-18 15.8201 7.81992)" fill="#E2141F"/>
        <rect x="15.8295" y="6.58469" width="0.78125" height="1.5625" transform="rotate(-18 15.8295 6.58469)" fill="#E2141F"/>
        <rect x="14.7056" y="8.18204" width="0.78125" height="0.78125" transform="rotate(-18 14.7056 8.18204)" fill="#E2141F"/>
        <rect x="13.9719" y="7.18823" width="0.78125" height="1.5625" transform="rotate(-18 13.9719 7.18823)" fill="#E2141F"/>
        <rect x="12.8574" y="7.55037" width="0.78125" height="2.34375" transform="rotate(-18 12.8574 7.55037)" fill="#E2141F"/>
        <rect x="11.9843" y="8.65551" width="1.17188" height="0.390625" transform="rotate(-18 11.9843 8.65551)" fill="#E2141F"/>
        <rect width="1.5625" height="0.390625" transform="matrix(0.951057 -0.309017 -0.309017 -0.951057 11.7429 7.9125)" fill="#E2141F"/>
        <rect width="0.78125" height="0.390625" transform="matrix(0.951057 -0.309017 -0.309017 -0.951057 11.4921 8.40471)" fill="#E2141F"/>
        <rect x="11.7335" y="9.14772" width="0.78125" height="0.78125" transform="rotate(-18 11.7335 9.14772)" fill="#E2141F"/>
        <rect x="12.3464" y="9.77003" width="0.78125" height="0.390625" transform="rotate(-18 12.3464 9.77003)" fill="#E2141F"/>
        <rect x="12.9687" y="9.1571" width="0.78125" height="0.390625" transform="rotate(-18 12.9687 9.1571)" fill="#E2141F"/>
        <rect x="18.43" y="5.73972" width="0.78125" height="2.34375" transform="rotate(-18 18.43 5.73972)" fill="#E2141F"/>
        <rect x="17.5569" y="6.84486" width="1.17188" height="0.390625" transform="rotate(-18 17.5569 6.84486)" fill="#E2141F"/>
        <rect width="1.5625" height="0.390625" transform="matrix(0.951057 -0.309017 -0.309017 -0.951057 17.3155 6.10185)" fill="#E2141F"/>
        <rect width="0.78125" height="0.390625" transform="matrix(0.951057 -0.309017 -0.309017 -0.951057 17.0647 6.59406)" fill="#E2141F"/>
        <rect x="17.3061" y="7.33707" width="0.78125" height="0.78125" transform="rotate(-18 17.3061 7.33707)" fill="#E2141F"/>
        <rect x="17.919" y="7.95938" width="0.78125" height="0.390625" transform="rotate(-18 17.919 7.95938)" fill="#E2141F"/>
        <rect x="18.5413" y="7.34646" width="0.78125" height="0.390625" transform="rotate(-18 18.5413 7.34646)" fill="#E2141F"/>
      </g>
    </svg>
  </g>
</svg>