float.svg

<svg width="144" height="109" viewBox="0 0 144 109" fill="none" xmlns="http://www.w3.org/2000/svg">
    <style>
    @keyframes gravitate {
      0% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-24px);
      }

      100% {
        transform: translateY(0px);
      }
    }

    @keyframes float-down {
      0% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(8px);
      }

      100% {
        transform: translateY(0px);
      }
    }

    #animate1 {
      animation: gravitate 8s ease infinite;
    }

    #animate2 {
      animation: float-down 12s ease infinite;
    }
  </style>
  <g id="animate2">
    <g filter="url(#filter0_d)">
      <path d="M68.5 84.0556L128 48.2661L75.5 16.0556L16 51.845L68.5 84.0556Z" fill="#114EA8" fill-opacity="0.75" />
    </g>
    <g id="animate1">
      <path d="M72.0016 26.0583L86.0031 34.0592V50.061L72.0016 58.0619L58 50.061V34.0592L72.0016 26.0583Z" fill="#80CEEF" />
      <path d="M86.0031 50.0691V34.06L72.0015 42.0609V58.0627L86.0031 50.0691Z" fill="#5FA7C6" />
      <path d="M71.8643 26.0555L58 34.0564L72.0016 42.0573L86.0031 34.0564L71.8643 26.0555Z" fill="#78C6E7" />
    </g>
    <defs>
      <filter id="filter0_d" x="9.53674e-07" y="8.05556" width="144" height="100" 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" />
        <feOffset dy="8" />
        <feGaussianBlur stdDeviation="8" />
        <feColorMatrix type="matrix" values="0 0 0 0 0.0685764 0 0 0 0 0.304479 0 0 0 0 0.658333 0 0 0 0.5 0" />
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
      </filter>
    </defs>
  </g>
</svg>