<svg class="Animation" width="140px" height="140px" viewBox="0 0 140 140">
<linearGradient id="Animation-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(#Animation-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>
.Animation {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) rotate(-45deg);
}
var s = Snap(".Animation");
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 );
This Pen doesn't use any external CSS resources.