<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 */