<div class="bubble"></div>
body {
	background: hsl(212, 100%, 91%);
}
$size: 50vmin;
$speed: 35s;
.bubble {
	width: $size;
	height: $size;
	background: hsl(212, 100%, 71%);
	border: ($size * .09) solid hsl(212, 100%, 81%);
	position: absolute;
	top: calc(50% - (#{$size} * .49));
	left: calc(50% - (#{$size} * .49));
	overflow: visible;
	border-radius: 48% 40% 62% 47% /  61% 49% 64% 43%;
	animation: rotate $speed infinite linear;
	z-index: 1;
}
@keyframes rotate {
	0% { transform: rotate(1turn); }
}

.bubble:before {
	content: '';
	position: absolute;
	top: $size * .1;
	left: $size * .1;
	width: calc(100% - (#{$size} * .3));
	height: calc(100% - (#{$size} * .3));
	background: hsl(212, 100%, 51%);
	border: ($size * .065) solid hsl(212, 100%, 61%);
	border-radius: 41% 40% 50% 55% /  49% 52% 51% 43%;
	z-index: -2;
	animation: rotateBefore $speed infinite linear;
}
@keyframes rotateBefore {
	0% { transform: rotate(-2turn); }
}

.bubble:after {
	content: '';
	position: absolute;
	top: $size * .2;
	left: $size * .2;
	width: calc(100% - (#{$size * .5}));
	height: calc(100% - (#{$size * .5}));
	background: hsl(212, 100%, 31%);
	border: ($size * .05) solid hsl(212, 100%, 41%);
	border-radius: 42% 63% 51% 60% / 47% 62% 42% 52%;
	animation: rotateAfter $speed infinite linear;
}
@keyframes rotateAfter {
	0% { transform: rotate(2turn); }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.