<div class="top_doodle">
    <css-doodle grid="1x120">
    :doodle {
      @size: 100vmin;
    }
      
      clip-path: polygon(40% 71%, 50% 0, 64% 0, 64% 71%, 73% 71%, 48% 100%, 24% 71%);

    background: @p(#FDFFFC, #2EC4B6, #E71D36, #FF9F1C);
      animation: flip @r(3s, 7s) ease-in-out infinite;
      
      @keyframes flip {
          0%, 100% {
              height: 0%;
          }
      
          25% {
              transform: rotateX(@p(360deg, -360deg))
              height: 10vh; 
          }
      
          50% {
              height: 20vh;
              transform: rotateX(@p(360deg, -360deg))
          }
      }
  </css-doodle>
</div>
