(Kotak garisan SVG) 'Menganalisa, mencari jalan keluar'

Demo

Sambil² tu, dengarkan kesan bunyi. Biar terasa seperti melihat satu adegan dalam filem sci-fi

Kredit: YouTube

CSS & JS (Kotak garisan SVG) dirujuk di codepen.io/leimapapa/pen/qBQKMem

<div class="labu">
<svg id="cari" class="inter3" viewBox="0 0 100 100" preserveAspectRatio="none">
<g stroke="rgba(255,255,255,0.5)" stroke-width="1" stroke-linecap="round">
<path class="tl" d="M5 50 L50 40" stroke-width="0.1" />
<path class="tl" d="M10 50 L50 35" stroke-width="0.2" />
<path class="tl" d="M15 50 L50 30" stroke-width="0.3" />
<path class="tl" d="M20 50 L50 25" stroke-width="0.4" />
<path class="tl" d="M25 50 L50 20" stroke-width="0.5" />
<path class="tl" d="M30 50 L50 15" stroke-width="0.4" />
<path class="tl" d="M35 50 L50 10" stroke-width="0.3" />
<path class="tl" d="M40 50 L50 5" stroke-width="0.2" />
<path class="tl" d="M45 50 L50 0" stroke-width="0.1" />
<path class="tr" d="M50 40 L95 50" stroke-width="0.1" />
<path class="tr" d="M50 35 L90 50" stroke-width="0.2" />
<path class="tr" d="M50 30 L85 50" stroke-width="0.3" />
<path class="tr" d="M50 25 L80 50" stroke-width="0.4" />
<path class="tr" d="M50 20 L75 50" stroke-width="0.5" />
<path class="tr" d="M50 15 L70 50" stroke-width="0.4" />
<path class="tr" d="M50 10 L65 50" stroke-width="0.3" />
<path class="tr" d="M50 5 L60 50" stroke-width="0.2" />
<path class="tr" d="M50 0 L55 50" stroke-width="0.1" />
<path class="bl" d="M5 50 L50 60" stroke-width="0.1" />
<path class="bl" d="M10 50 L50 65" stroke-width="0.2" />
<path class="bl" d="M15 50 L50 70" stroke-width="0.3" />
<path class="bl" d="M20 50 L50 75" stroke-width="0.4" />
<path class="bl" d="M25 50 L50 80" stroke-width="0.5" />
<path class="bl" d="M30 50 L50 85" stroke-width="0.4" />
<path class="bl" d="M35 50 L50 90" stroke-width="0.3" />
<path class="bl" d="M40 50 L50 95" stroke-width="0.2" />
<path class="bl" d="M45 50 L50 100" stroke-width="0.1" />
<path class="br" d="M50 60 L95 50" stroke-width="0.1" />
<path class="br" d="M50 65 L90 50" stroke-width="0.2" />
<path class="br" d="M50 70 L85 50" stroke-width="0.3" />
<path class="br" d="M50 75 L80 50" stroke-width="0.4" />
<path class="br" d="M50 80 L75 50" stroke-width="0.5" />
<path class="br" d="M50 85 L70 50" stroke-width="0.4" />
<path class="br" d="M50 90 L65 50" stroke-width="0.3" />
<path class="br" d="M50 95 L60 50" stroke-width="0.2" />
<path class="br" d="M50 100 L55 50" stroke-width="0.1" />
</g>
</svg>
</div>
<style>
  .labu {
background: #244f25;
    width: 100%;
    height: 70vh;
    border: 2px solid brown;
    border-radius: 6px;
}
#cari {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
    height: 70vh;
}
.tl,
.tr,
.bl,
.br {
transition: 2800ms;
}
</style>
<script>
  const randInt = (min, max) => {
  return Math.floor(Math.random() * 
(max - min + 1)) + min;
}
function updateGrid(x, y) {
let tl = document.querySelectorAll('.tl');
let tr = document.querySelectorAll('.tr');
let bl = document.querySelectorAll('.bl');
let br = document.querySelectorAll('.br');
let brs = [
`M${x} ${100 - ((100 - y) * .9)} L${100 - ((100 - x) * .1)} ${y}`,
`M${x} ${100 - ((100 - y) * .8)} L${100 - ((100 - x) * .2)} ${y}`,
`M${x} ${100 - ((100 - y) * .7)} L${100 - ((100 - x) * .3)} ${y}`,
`M${x} ${100 - ((100 - y) * .6)} L${100 - ((100 - x) * .4)} ${y}`,
`M${x} ${100 - ((100 - y) * .5)} L${100 - ((100 - x) * .5)} ${y}`,
`M${x} ${100 - ((100 - y) * .4)} L${100 - ((100 - x) * .6)} ${y}`,
`M${x} ${100 - ((100 - y) * .3)} L${100 - ((100 - x) * .7)} ${y}`,
`M${x} ${100 - ((100 - y) * .2)} L${100 - ((100 - x) * .8)} ${y}`,
`M${x} ${100 - ((100 - y) * .1)} L${100 - ((100 - x) * .9)} ${y}`
];
for (let i=0; i<tl.length; i++) {
tl[i].setAttribute('d', `M${(x * (.1 + (.1 * i)))} ${y} L${x} ${(y * (.9 - (.1 * i)))}`);
tr[i].setAttribute('d', `M${x} ${(y * (.9 - (.1 * i)))} L${100 - ((100 - x) * (.1 + (.1 * i)))} ${y}`);
bl[i].setAttribute('d', `M${(x * (.1 + (.1 * i)))} ${y} L${x} ${100 - ((100 - y) * (.9 - (.1 * i)))}`);
br[i].setAttribute('d', `M${x} ${100 - ((100 - y) * (.9 - (.1 * i)))} L${100 - ((100 - x) * (.1 + (.1 * i)))} ${y}`);
}
}
setInterval(() => {
let x = randInt(0,100);
let y = randInt(0,100);
updateGrid(x, y);
}, 3000);
  </script>