パーティクル接続ネットワーク

<canvas class="d07-02-03-cv"></canvas>
        <span class="d07-02-03-label">背景サンプル</span>

.d07-02-03{padding:0;background:#0c1230}
        .d07-02-03-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
        .d07-02-03-label{position:relative;z-index:2;color:#fff;font-weight:700;letter-spacing:.08em;font-size:15px;text-shadow:0 2px 10px rgba(0,0,0,.5)}

(function(){
        var root=document.getElementById('item-07-02-03');if(!root)return;
        var cv=root.querySelector('.d07-02-03-cv');var ctx=cv.getContext('2d');
        var w,h,dpr,pts=[],N=34,raf;
        function size(){dpr=Math.min(window.devicePixelRatio||1,2);var r=cv.getBoundingClientRect();w=r.width;h=r.height;cv.width=w*dpr;cv.height=h*dpr;ctx.setTransform(dpr,0,0,dpr,0,0);}
        function init(){pts=[];for(var i=0;i<N;i++){pts.push({x:Math.random()*w,y:Math.random()*h,vx:(Math.random()-.5)*.4,vy:(Math.random()-.5)*.4});}}
        function draw(){ctx.clearRect(0,0,w,h);
          for(var i=0;i<pts.length;i++){var p=pts[i];p.x+=p.vx;p.y+=p.vy;
            if(p.x<0||p.x>w)p.vx*=-1;if(p.y<0||p.y>h)p.vy*=-1;
            ctx.fillStyle='rgba(120,180,255,.9)';ctx.beginPath();ctx.arc(p.x,p.y,1.8,0,6.28);ctx.fill();}
          for(var a=0;a<pts.length;a++){for(var b=a+1;b<pts.length;b++){
            var dx=pts[a].x-pts[b].x,dy=pts[a].y-pts[b].y,d=Math.sqrt(dx*dx+dy*dy);
            if(d<90){ctx.strokeStyle='rgba(120,180,255,'+(1-d/90)*.5+')';ctx.lineWidth=1;
              ctx.beginPath();ctx.moveTo(pts[a].x,pts[a].y);ctx.lineTo(pts[b].x,pts[b].y);ctx.stroke();}}}
          raf=requestAnimationFrame(draw);}
        function start(){size();init();cancelAnimationFrame(raf);draw();}
        window.addEventListener('resize',function(){size();});
        if('IntersectionObserver' in window){var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){start();io.disconnect();}});});io.observe(cv);}else{start();}
      })();