Javascript 如何将移动div与线连接

从这一点（与下面的代码片段相同）开始，我想知道如何将几个动画点与发际线连接起来（或似乎将它们连接起来），这样当两个点四处移动时，它们的线会随之移动，只要这些点可见，它们就会一直保持连接

//chrome中的佼佼者
$total:300；//总颗粒
$orb大小：100px；
$particle size:2px；
$time:14秒；
$base色调：0；//改变不同颜色（180很好）
html，正文{
身高：100%；
}
身体{
背景：黑色；
溢出：隐藏；//没有滚动条。。
}
.包裹{
位置：相对位置；
最高：50%；
左：50%；
宽度：0；
身高：0；
变换样式：保留-3d；
透视图：1000px；
动画：旋转$time无限线性；//旋转球体
}
@关键帧旋转{
100% {
变换：旋转（360度）旋转（360度）；
}
}
c{
位置：绝对位置；
宽度：$粒径；
高度：$粒径；
边界半径：50%；
不透明度：0；
}
@对于$i，从1到$total{
$z：（随机（360）*1deg）；//旋转的随机角度
$y：（随机（360）*1deg）；//随机到rotateX
$色调：（（40/$total*$i）+$base色调）；//设置色调
.c:n个子（#{$i}）{//抓住第n个粒子
动画：轨道#{$i}$时间无限；
动画延迟：（$i*.0.01s）；
背景色：hsla（$色调，100%，50%，1）；
}
@关键帧环绕#{$i}{
20% {
不透明度：1；//淡入
}
30% {
transform:rotateZ（$z）rotateY（$y）translateX（$orb size）rotateZ（$z）；//form orb
}
80% {
变换：rotateZ（$z）rotateY（$y）translateX（$orb size）rotateZ（$z）；//保持球体状态30-80
不透明度：1；//保持不透明度20-80
}
100% {
变换：rotateZ（$z）rotateY（$y）translateX（$orb size*3））rotateZ（$z）；//translateX*3
}
}
}

Canvas会使此变得微不足道，但并非绝对必要。Canvas会使此变得微不足道，但并非绝对必要。