<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
  });