<div></div>
$p: 6.25em;
$r: 1.5em;
$b: 20*$r;
$d: 2*($b - $r);
$c: /*#001f3f, #f012be, */#490a3d, /*#bd1550,*/ #e97f02/*, #f8ca00, #8a9b0f*/;
$n: length($c);
$q: 20%;
$t: 1s;

html {
	background: #333;
	filter: drop-shadow(2px 2px 5px rgba(#000, .5))
}

body {
	display: grid;
	place-content: center;
	margin: 0;
	height: 100vh;
	animation: fsx 4*$t steps(1) infinite
}

@keyframes fsx { 50% { transform: scale(-1) } }

div {
	overflow: hidden;
	position: relative;
	padding: $p;
	border-radius: 1em;
	animation: 
		fbg 2*$n*$t steps(1) #{-$t} infinite, 
		fsc 2*$t steps(1) infinite;
	
	&::after {
		position: absolute;
		top: 50%; left: 50%;
		margin: -$r (-.5*$d - $r);
		padding: $b;
		transform-origin: 50% 0;
		animation: 
			fbg 2*$n*$t steps(1) -3*$t infinite, 
			mov $t infinite alternate,
			exp $t ease-in infinite alternate;
		content: ''
	}
}

@keyframes fsc { 50% { transform: scaley(-1) } }

@keyframes fbg {
	@for $i from 0 to $n {
		#{$i/$n*100%} { background: nth($c, $i + 1) }
	}
}

@keyframes mov {
	0%, #{$q} { transform: none }
	100% { transform: translatey($r) rotate(.5turn) }
}

@keyframes exp {
	0%, #{$q} { clip-path: inset(0 .5*$d $d round 50%) }
	100% { clip-path: inset(0 round 50%/ 0) }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js