<svg id="quair-logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="140px" height="140px" viewBox="0 0 140 140" enable-background="new 0 0 140 140" xml:space="preserve">
	<linearGradient id="logo-gradient" gradientUnits="userSpaceOnUse" x1="70" y1="-1.383" x2="70" y2="-182.3596" gradientTransform="matrix(0.7071 0.7071 0.7071 -0.7071 77.0711 -36.066)">
		<stop offset="0" style="stop-color:#008EEC"/>
		<stop offset="1" style="stop-color:#33E3C9"/>
	</linearGradient>
	<path fill="url(#logo-gradient)" d="M70,1.43C32.13,1.43,1.43,32.13,1.43,70s30.7,68.57,68.57,68.57 s68.57-30.7,68.57-68.57S107.87,1.43,70,1.43z M70,104.29c-18.94,0-34.29-15.35-34.29-34.28S51.06,35.72,70,35.72 s34.29,15.36,34.29,34.29S88.94,104.29,70,104.29z"/>
</svg>
#quair-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) rotate(-45deg);
}

var s = Snap("#quair-logo"); 

var d = s.ellipse(70, 70, 52, 52).attr({ stroke: '#ffffff', 'strokeWidth': 0, fill: 'none' });

var loop = "M70.21,121.13c0,0-0.1,0.22-0.2,0";
var loop_transform = "M98.39,112.6c-8.13,5.39-17.89,8.53-28.38,8.53";

var k = s.path({
	path: loop,
	fill: "none",
	stroke: "#ffffff",
	strokeWidth: "20.3",
	strokeMiterlimit: "10",
	strokeLinecap: "round"
});

var group_mask = s.group(d, k);

var anim_transform = function() { 
	setTimeout(function() {
		k.animate({ path: loop_transform }, 400, mina.easeinout,
			function() {
				anim_transform_frame2();
			}
		);
	}, 100);	    
}

var anim_transform_frame2 = function() {
	k.animate({ path: loop }, 400, mina.easeinout);
}

function anim_rotate( el ) {
	el.transform('r0,70,70');
	el.animate({ transform: 'r360,70,70'}, 1000, mina.easeinout, function() {
		setTimeout(function() {
			anim_rotate(el);
			anim_transform();
		}, 1000);
	}
	);
};

anim_transform();
anim_rotate( group_mask );

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js