<svg id='svg' width='100%' height='100%'>
<defs>
<filter id="glow" x="-50%" y="-50%" height="500%" width="500%">
<feGaussianBlur stdDeviation="12" result="coloredBlur"/>
</filter>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" 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 20 -8" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
<path  id='path'  fill='none' stroke='#00e7ff' stroke-width='7'  filter="url(#glow)" ></path>
<path  id='path2' fill='none' stroke='#fff' stroke-linejoin="round" stroke-linecap='round' filter="url(#goo)" ></path>
</svg>
<div id="text">Light</div>

<div id='setLight'>
  set Light trail length/speed
  <select onchange="setLLenght(this)">
  <option value="7">7</option>
  <option selected="selected" value="25">20</option>
  <option value="50">50</option> 
  <option value="80">80</option>
</select>
</div>


@import url(https://fonts.googleapis.com/css?family=Oswald);
html,
body {
  user-select: none;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 15, 20);
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  cursor: none;
}

#text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Oswald', tahoma;
  color: rgb(0,15,20);
  font-size: 110px;
  text-align: center;
  white-space: nowrap;
  text-shadow:
   -2.5px -2.5px 0 rgba(0,15,20,0.6),  
    2.5px -2.5px 0 rgba(0,15,20,0.6),
    -2.5px 2.5px 0 rgba(0,15,20,0.6),
     2.5px 2.5px 0 rgba(0,15,20,0.6);
}

a {
  color: orange;
}

#setLight {
  position: absolute;
  left: 20px;
  top: 15px;
  font-size: 1em;
  color: #00FFA4;
  font-family: sans-serif;
  line-height: 30px;
}

#setLight span{
  color: silver;
}

#DiacoDesignLink,#pens{
  color: #fff;
}
/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */
var 
p1=document.getElementById("path"),p2=document.getElementById("path2") ,
np=25,pM='M',pQ=' Q',pCo=',',pSp=' ',pDZ='0,0',pD=[] ;
document.addEventListener('mousemove',function(){aP(event)} );
document.addEventListener('touchmove',function(){ event.preventDefault(); aP(event.targetTouches[0])});
function aP(e){ 
	pD.push([e.pageX,e.pageY]);
	if(pD.length>np){rP()};
	pU();
};
var t = new com.greensock.Ticker(45);
t.addEventListener("tick",rP);
function mP(p2,p1,f){return [p1[0]+(p2[0]-p1[0])*f,p1[1]+(p2[1]-p1[1])*f]};
function rP(){ if(pD.length>1){ pD.shift(); pU(); } };
function pU(){
	p2.setAttribute("stroke-width",pD.length/np*4.5);
	var nP=pD.length>1?pM:pM+pDZ;
	for( var L=pD.length-1,j=0; j<L; j++ ){
		if( j!=0 ){
			var P2=mP(pD[j],pD[j+1],.5);
			nP+=pQ+pD[j][0]+pCo+pD[j][1]+pSp+P2[0]+pCo+P2[1];
		}else{ nP+=pSp+pD[j][0]+pCo+pD[j][1] }
	}
	p1.setAttribute("d",nP);	p2.setAttribute("d",nP);
}
function setLLenght(X){ np=X.value };
/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css
  2. https://codepen.io/MAW/pen/XVRpEE.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js
  2. https://codepen.io/MAW/pen/XVRpEE.js