<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.7.2/css-doodle.min.js