<div id="back">All about My Life</div>
<svg id="myLife" width="500px" height="500px" viewBox="0 0 500 500" >
  <g id="I">
    <circle cy="20" fill="rgba(0,0,0,0.2)" r="73"/><circle fill="#d50027" r="80"/><circle cy="-5" fill="#ff002f" r="75"/>
    <text text-anchor="middle" font-family="Verdana" alignment-baseline="middle" font-size="20" fill="white">LET ME GO</text>
  </g></svg>

svg{
  overflow:visible;  position:absolute;
  left:50%;top:50%;  transform: translate(-50%,-50%);
}


#back{
  position:absolute;
  left:50%;top:50%;  
  width:90%;
  transform:translate(-50%,-50%);
  font-family:arial;
  color:rgba(0,0,0,0.1);
  font-size:50px; font-size:10vw;
  text-align:center;
  white-space: nowrap;
}

/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */
var C=15,AX=[],AY=[];I=document.getElementById("I"),svg=document.getElementById("myLife");
var svgNS = "http://www.w3.org/2000/svg";  
for (var i=0;i<C;i++) {
var myCircle = document.createElementNS(svgNS,"circle"); 
var myLine = document.createElementNS(svgNS,"line"); 
var w =R(7,15),x=R(10,500),y=R(10,500); AY.push(y); AX.push(x);
svg.insertBefore(myCircle,I);  svg.insertBefore(myLine,I);
TweenLite.set(myCircle,{attr:{r:w},x:x,y:y,fill:"silver",opacity:0.7,stroke:"gray",strokeWidth:2});
TweenLite.set(myLine,{attr:{x1:x,x2:x,y2:y,y1:y},strokeWidth:w/2,strokeLinecap:"round",className:"lines",fill:"none",stroke:"rgba(0,0,0,0.8)"});
};
var y=Aa(AY) , x=Aa(AX);  TweenLite.set(I,{y:y,x:x});
Draggable.create(I,{type:"x,y",onDrag:SU,
onRelease:function(){TweenLite.to(this.target,1,{x:x,y:y,ease:Elastic.easeOut.config(1,0.15),onUpdate:SU})}
});
function SU(){TweenMax.set(".lines",{attr:{x2:I._gsTransform.x,y2:I._gsTransform.y}})};SU();
function R(min,max){return min+Math.floor(Math.random()*(max-min))};
function Aa(arr){return Math.min.apply(Math,arr)+(Math.max.apply(Math,arr)-Math.min.apply(Math,arr))/2};

/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */