<div class="glowy-blob">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<span>Drag</span>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
  </defs>
</svg>
@import 'compass/css3';
@import url('https://fonts.googleapis.com/css?family=Chewy|Gloria+Hallelujah');
$bg : #121327;
html { height:100%; width:100%; }
body{
 margin:0;
 padding:0;
 height:100%;
 width:100%;
 background:$bg;
 overflow:hidden;
 @include filter(hue-rotate(0deg));
 @include animation(huerot 5s ease infinite )
}
/** end for goo container **/
@function randomNum($min, $max) {
 $rand: random();
 $randomNum: $min + floor($rand * (($max - $min) + 1));
 @return $randomNum;
}

$color:#fff;
$color2:#5048A0;
$color3:#85EDE8;
$color4:#48098b;
.glowy-blob {
 position:absolute;
 left:50%;
 top:50%;
 @include transform(translate(-50,-50));
 @include filter(url('#goo'));
 div {
  width:80px;
  height: 80px;
  background:$color3;
  @include border-radius(500px);
  display: inline-block;
  position:absolute;
  box-shadow:0px 0px 50px $color3;
  $top-collection: 0;
  $left-collection: 0;

  @for $i from 2 to 17 {
   $left: randomNum(-60px, 60px);
   $top: randomNum(-60px, 60px);
   $randWH : randomNum(30px, 60px);
   &:nth-child(#{$i}) {
    width:$randWH;
    height: $randWH;
    left:$left;
   }

   $left-collection: append($left-collection,$left);
   $top-collection: append($top-collection,$top);
  }

  @for $i from 1 to length($top-collection) {
   &:nth-child(#{$i}) {
    top: 0;
    left: 0;
    @include animation(anim-#{$i} 2.5s ease-in-out infinite);
    @if($i == 1) {
     @include animation-delay(0s);
    }
    @else {
     @include animation-delay(randomNum(1s,3s));
    }
  }
  /**keyframes **/
   @include keyframes(anim-#{$i}) {
    0%{left:0;top:0}
    50% { left:nth($left-collection, $i+1);top:nth($top-collection, $i)}
    100%{left:0;top:0}
   }
  } //end of collection loop
  &:hover {
   cursor:default;
  }
 } //end of div

} //end of glowby-blob

 span {
  color:$color3;
  opacity: 0.5;
  font-size: 24px;
  font-family:'Chewy';
  font-weight: bolder;
  text-transform: uppercase;
  letter-spacing:1px;
  position: absolute;
  left:50%;
  top:30%;
  @include transform(translate(-50,-50));
  -webkit-touch-callout: none; /* iOS Safari */
  @include user-select(none);
	 &:hover {
		 cursor:default;
	 }
 }

@include keyframes(huerot) {
 0%{@include filter(hue-rotate(0deg));}
 100%{@include filter(hue-rotate(360deg));}
}
@include keyframes(bounceback) {
 100%{left:0;top:0}
}
View Compiled
var doms = document.getElementsByClassName("glowy-blob");

var selected = 0;

for(var x =0;x<doms.length;x++) {
    for(var i = 0;i<doms[x].children.length;i++) {
        doms[x].children[i].addEventListener("mousedown", function(e){
            selected = this;
        })
    }
}

window.addEventListener("mouseup", function(e){
	selected.style.animation = "bounceback 1s ease";
	selected.style.animationFillMode = "forwards";
	var lala = selected;
	selected = null;

	setTimeout(function() {
	    lala.style.animation = "";
	    lala.style.animationFillMode = "";
	    lala.style.left = "";
	    lala.style.top = "";
	},1000)

})

window.addEventListener("mousemove", function(e) {
    if(selected == null || !selected) return;
    selected.style.left = (e.clientX - (selected.getBoundingClientRect().width/2) - window.innerWidth/2) +"px"
    selected.style.top = (e.clientY - (selected.getBoundingClientRect().height/2) - window.innerHeight/2 ) +"px"
    selected.style.animation = 0;
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.