mixin nest(cls, n)
	div(class=cls)
		if --n
			+nest(cls, n)

+nest('ring', 4)
View Compiled
$c: #c6c09c #ffc98b #ffb284 #e79796;
$l: 13em;
$f: .6;
$r: (1 - $f)*25%;
$p0: calc(#{$r} - 2px);
$p1: calc(#{$r} - 1px);

body {
	display: grid;
	place-content: center;
	overflow: hidden;
	margin: 0;
	height: 100vh;
	background: #222
}

.ring {
	--f: 1;
	width: $l; height: $l;
	transform: scale(var(--f));
	opacity: var(--f);
	background: 
		radial-gradient(circle at 50% $r, nth($c, 1) $p0, transparent $p1), 
		radial-gradient(circle at $r, nth($c, 2) $p0, transparent $p1), 
		radial-gradient(circle at 50% 100% - $r, nth($c, 3) $p0, transparent $p1), 
		radial-gradient(circle at 100% - $r, nth($c, 4) $p0, transparent $p1);
	animation: a 2s ease-in-out infinite;
	
	& > & { --f: #{$f} }
}

@keyframes a { to { transform: scale(var(--f)) rotate(1turn) } }
View Compiled

External CSS

  1. https://codepen.io/thebabydino/pen/evPbxv.scss

External JavaScript

  1. https://codepen.io/thebabydino/pen/evPbxv.js