<div class="loading_cont">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="loader">
    
            <image mask="url(#maska)" id="mask2" xlink:href="https://www.discoverpuertorico.com/sites/default/files/2019-02/crashboat-beach-aguadilla-hero.jpg" 
                   width="1600" height="1060"></image>
		<defs>
			<filter id="goo">
				<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
				<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
				<feBlend in2="goo" in="SourceGraphic" result="mix" />
			</filter>
			<linearGradient id="MyGradient">
					<stop offset="5%"  stop-color="#40204c"/>
					<stop offset="40%" stop-color="#a3225c"/>
					<stop offset="100%" stop-color="#e24926"/>
			</linearGradient>
		</defs>
		<mask id="maska">
			<g class="blobs">
				<circle class="blob" cx="440" cy="250" r="30" transform="rotate(0) translate(0, 0) rotate(0)"/>
				<circle class="blob" cx="500" cy="320" r="70"  transform="rotate(0) translate(0, 0) rotate(0)"/>
				<circle class="blob" cx="300" cy="390" r="40"  transform="rotate(0) translate(0, 0) rotate(0)"/>
				<circle class="blob" cx="380" cy="390" r="80"  transform="rotate(0) translate(0, 0) rotate(0)"/>
				<circle class="blob" cx="470" cy="450" r="20"  transform="rotate(0) translate(0, 0) rotate(0)"/>
			</g>
		</mask>
<!-- 		<rect x="200" y="200"  mask="url(#maska)" fill="url(#mask2)" width="400" height="400"> -->
	</svg>	
</div>
body {
 margin: 0;
 height: 100vh;
 overflow: hidden;
}

.loading_cont {
 width: 100%;
 height: 100%;
 background: red;
 background: -webkit-linear-gradient(left top, #152a8e, #b1376c);
 background: -o-linear-gradient(bottom right, #152a8e, #b1376c);
 background: -moz-linear-gradient(bottom right, #152a8e, #b1376c);
 background: linear-gradient(to bottom right, #152a8e, #b1376c);
}

.loading_cont:before {
 content: "";
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0px;
 background: url(https://next.atcom.gr/StaticData/Landing2017/Content/Media/dots-transparent.png) repeat scroll center center;
 opacity: 0.05;
 z-index: 0;
}

#loader {
	display: inline-block;
	position: relative;
	width: 800px;
	height: 800px;
	top: 50%;
	left: 50%;
	margin-left: -400px;
	margin-top: -400px;
}

rect {
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
}

.blobs {
 -webkit-filter: url("#goo");
 filter: url("#goo");
}

.blob {
	fill: white;
}

	var radius = 8;
	TweenMax.staggerFromTo('.blob', 4 ,{
		cycle: {
			attr:function(i) {
				var r = i*90;
				return {
					transform:'rotate('+r+') translate('+radius+',0.1) rotate('+(-r)+')'
				}      
			}
		}  
	},{
		cycle: {
			attr:function(i) {
				var r = i*90+360;
				return {
					transform:'rotate('+r+') translate('+radius+',0.1) rotate('+(-r)+')'
				}      
			}
		},
		ease:Linear.easeNone,
		repeat:-1
	});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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