JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

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

CSS

.blob {
    background: #bada55;
  display: block;
   min-width: 100px;
   min-height: 100px;
   -webkit-border-radius: 50%; 
   -moz-border-radius: 50%; 
   border-radius: 50%; 
   position: absolute;
   -webkit-transition:min-height 100ms ease-in-out, min-width 100ms ease-in-out;
}

.bound {
    border: 5px solid rgba(0,0,0,0.5);
}

JavaScript

var blob = $(".blob"), bound = false;

$(window).bind("mousemove", function(e,el){
    if(bound){   
  var top = (e.pageY-50),
      left = (e.pageX-50),
      topB = blob.offset().top,
      leftB = blob.offset().left,
      height = (topB>top)?(top/topB):(topB/top),
      width = (leftB>left)?(left/leftB):(leftB/left),
      percent = (height>width)?height:width;
        
        blob.css({
            height:percent*100,
            width:percent*100
        }).stop().animate({
            height:100,
            width:100,
            top:top,
            left:left
        }, "easein");
    }
});

blob.bind("click", function(e, el){
    if(!bound){
        bound = true;
        blob.addClass("bound");
    } else {
        bound = false;
        blob.removeClass("bound");  
    }
});