SOURCE

!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.CanvasNest=n():t.CanvasNest=n()}(window,function(){return function(t){var n={};function e(i){if(n[i])return n[i].exports;var s=n[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,e),s.l=!0,s.exports}return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="",e(e.s=0)}([function(t,n,e){"use strict";e.r(n);const i=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){return window.setTimeout(t,1e3/60)};n.default=class{constructor(t){this.config=this.getConfig(t),this.canvas=this.config.el||this.newCanvas(),this.canvas_width=this.canvas.width=this.canvas.clientWidth,this.canvas_height=this.canvas.height=this.canvas.clientHeight,this.context=this.canvas.getContext("2d"),this.current_point={x:null,y:null,max:2e4},this.random_points=[],this.all_points=[],window.onresize=this.onResize.bind(this),window.onmousemove=this.onMouseMove.bind(this),window.onmouseout=this.onMouseOut.bind(this),this.generatePoints(),this.frame_func(this.draw_canvas)}getConfig(t){return Object.assign({opacity:.5,color:"0,0,0",count:99,zIndex:-1},t||{})}newCanvas(){const t=document.createElement("canvas");return t.style.cssText="position:fixed;top:0;left:0;width:100%;height:100%;z-index:"+this.config.zIndex+";",document.getElementsByTagName("body")[0].appendChild(t),t}generatePoints(){for(let t=0;t<this.config.count;t++)this.random_points.push({x:Math.random()*this.canvas_width,y:Math.random()*this.canvas_height,xa:2*Math.random()-1,ya:2*Math.random()-1,max:6e3});this.all_points=this.random_points.concat([this.current_point])}frame_func(t){return i(()=>t.call(this))}draw_canvas(){this.context.clearRect(0,0,this.canvas_width,this.canvas_height);for(let t=0;t<this.random_points.length;t++){const n=this.random_points[t];n.x+=n.xa,n.y+=n.ya,n.xa*=n.x>this.canvas_width||n.x<0?-1:1,n.ya*=n.y>this.canvas_height||n.y<0?-1:1;for(let e=t+1;e<this.all_points.length;e++){const t=this.all_points[e];if(null!==t.x&&null!==t.y){const e=n.x-t.x,i=n.y-t.y,s=e*e+i*i;if(s<t.max){t===this.current_point&&s>=t.max/2&&(n.x-=.03*e,n.y-=.03*i);const o=(t.max-s)/t.max;this.context.beginPath(),this.context.lineWidth=o/2,this.context.strokeStyle="rgba("+this.config.color+","+(o+this.config.opacity)+")",this.context.moveTo(n.x,n.y),this.context.lineTo(t.x,t.y),this.context.stroke()}}}}this.frame_func(this.draw_canvas)}onResize(){this.canvas_width=this.canvas.width=this.canvas.clientWidth,this.canvas_height=this.canvas.height=this.canvas.clientHeight}onMouseMove(t){t=t||window.event,this.current_point.x=t.clientX,this.current_point.y=t.clientY}onMouseOut(){this.current_point.x=null,this.current_point.y=null}}}]).default});

<script>
    new CanvasNest({
        opacity: 0.1,
        color: '0,0,0',
        count: 99
    })
</script>