<css-doodle grid="1x25">
  :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: 50vh; 
    }
  
    50% {
      height: 100vh;
      transform: rotateX(@p(360deg, -360deg))
    }
  }
</css-doodle>

body{
  background: #000;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  display: grid;
  justify-items: center;
}