<html>
  <div class="slash_line_outer"></div>
</html>
.slash_line_outer {
  position: fixed;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  .slash_position {
    position: absolute;
    stroke: #666; //線の色はここで調整
  }
  svg {
    opacity: 1;
    stroke-width: 1px; //線幅はここで調整
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: slash_line 3s; //線が流れる速さはここで調整
    animation-timing-function: ease-in-out;
    animation-direction: reverse;
  }
  //アニメーションの定義
  @keyframes slash_line {
    50% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: -800;
    }
  }
}
View Compiled
window.onload = function() {
  
  /*=======================================
    パラメーター設定ここから
 =======================================*/
  
  // 実行間隔(ms)
  const intervalMs = 300;
  
  // 描画を許可する座標の範囲(max)
  const randomRangeMax = 110;
  
  // 描画を許可する座標の範囲(min)
  const randomRangeMin = -10;
  
  // 直近x個の線と座標がかぶらないようにする
  const disallowedAxisNum = 4;
  
  // 縦横この範囲に既存の線があったら生成しない
  const disallowedRange = 8;
  
  // 線の長さ上限(vh)
  const lineLengthMax = 30;
  
  // 線の長さ下限(vh)
  const lineLengthMin = 20;
  
  // 線生成数上限
  const counterMax = 15;
  
  /*=======================================
    パラメーター設定ここまで
  =======================================*/
   
  // 変数の初期化
  let arrayY = [];
  let arrayX = [];
  let i = 1;
  
  // 描画エリアを取得
  const drawArea = document.querySelector('.slash_line_outer');
  
  // 処理本体
  const drawSlashLine = () => {
    
    // svg描画用のdivを定義
    let positionHtml = (top, left, n) => `<div class="slash_position n${n}" style="top: ${top}%; left: ${left}%;"></div>`;
    
    // 生成するsvgを定義
    let line = height => `<svg style="height: ${height}vh;" xmlns="http://www.w3.org/2000/svg"><line class="cls-1" x1="0.48" y1="320.5" x2="99.34" y2="0.15"/></svg>`;
    
    // 変数の初期化
    let y = 0;
    let x = 0;
    let randomNumY = 0;
    let randomNumX = 0;
    
    // Y軸座標乱数生成
    randomNumY = Math.floor( Math.random() * (randomRangeMax + 1 - randomRangeMin) ) + randomRangeMin; 
    
    // 生成されたY軸の座標が直近で生成された線のY座標と近すぎないか判定
    let rangeY = (element) => (randomNumY - disallowedRange) < element && element < (randomNumY + disallowedRange);
    if (arrayY.some(rangeY)) {
      return; // 近すぎたらNG
    }
    
    // X軸座標乱数生成
    randomNumX = Math.floor( Math.random() * (randomRangeMax + 1 - randomRangeMin) ) + randomRangeMin;
    
    // 生成されたX軸の座標が直近で生成された線のX座標と近すぎないか判定
    let rangeX = (element) => (randomNumX - disallowedRange) < element && element < (randomNumX + disallowedRange);
    if (arrayX.some(rangeX)) {
      return; // 近すぎたらNG
    }
    
    // 座標を保持している数が設定値の上限に達していたら一番古いものを削除
    if (arrayY.length >= disallowedAxisNum) {
      arrayY.shift();
      arrayX.shift();
    }
    
    // 新しい座標を保持
    arrayY.push(randomNumY);
    arrayX.push(randomNumX);
    
    // 古くなった既存の線を削除
    let positionSelector = document.querySelector(`.slash_position.n${i}`);
    if (positionSelector) {
      positionSelector.remove();
    }
    
    // 生成したY軸X軸の乱数を基に新しい線を生成、線の長さもここで決める
    drawArea.insertAdjacentHTML("beforeend", positionHtml(randomNumY, randomNumX, i));
    let parent = document.querySelector(`.slash_position.n${i}`);
    let lineHeight = Math.floor( Math.random() * (lineLengthMax + 1 - lineLengthMin) ) + lineLengthMin;
    parent.insertAdjacentHTML("beforeend", line(lineHeight));
  
    // 線の生成数が設定値の上限に達していたらカウンターをリセット
    if (i >= counterMax) {
      i = 0;
    }
    i++;
  };
  
  // 処理本体を実行する間隔を設定
  const interval = setInterval(drawSlashLine, intervalMs);
  
  // ブラウザのタブが非アクティブになったら動作を停止し、アクティブになったら初期化して再実行
  document.addEventListener("visibilitychange", function() {
    if(document.visibilityState == "hidden") {
      clearInterval(interval);
      document.querySelectorAll(".slash_position").forEach(el => el.remove());
    } else {
      let arrayY = [];
      let arrayX = [];
      let i = 1;
      clearInterval(interval);
      setInterval(drawSlashLine, intervalMs);
    }
  });
};
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.