의미 벡터 검색

<div class="scene"><div class="heading">NEAREST NEIGHBORS</div><div class="field"><span class="query">질문</span><span class="point p1">A</span><span class="point p2">B</span><span class="point p3">C</span><span class="point p4">D</span><span class="ring"></span></div><div class="muted" id="nearest">가장 가까운 점: A</div></div>

.scene{width:min(94vw,800px);height:min(88vh,326px);padding:clamp(10px,2.7vmin,19px);border:1px solid var(--line);border-radius:13px;background:var(--surface);font:500 clamp(13px,2.4vmin,17px)/1.3 var(--font-sans,sans-serif);position:relative;overflow:hidden}.scene .mono{font-family:ui-monospace,SFMono-Regular,monospace}.scene .muted{color:var(--muted)}.scene .accent{color:var(--accent)}.scene .heading{font-weight:750;color:var(--accent);margin-bottom:clamp(5px,1.6vmin,12px)}.field{height:68%;position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden}.query,.point{position:absolute;border-radius:50%;width:clamp(28px,8vmin,43px);height:clamp(28px,8vmin,43px);display:grid;place-items:center;background:var(--bg);border:2px solid var(--line);z-index:1}.query{left:44%;top:36%;transition:left .6s,top .6s;background:var(--accent);color:var(--surface)}.p1{left:22%;top:26%}.p2{left:62%;top:22%}.p3{left:71%;top:65%}.p4{left:14%;top:68%}.point.hit{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--surface))}.ring{position:absolute;width:clamp(70px,22vmin,110px);aspect-ratio:1;border:2px dashed var(--accent);border-radius:50%;left:40%;top:10%;transition:left .6s,top .6s;animation:pulse 2s infinite}@keyframes pulse{50%{transform:scale(1.25);opacity:.35}}

const compact=innerWidth<500;let second=false;function draw(){second=!second;const query=document.querySelector('.query'),ring=document.querySelector('.ring');query.style.left=second?(compact?'54%':'66%'):'40%';query.style.top=second?(compact?'65%':'57%'):'50%';ring.style.left=second?(compact?'46%':'62%'):(compact?'32%':'36%');ring.style.top=second?(compact?'33%':'44%'):(compact?'30%':'36%');document.querySelector('.p1').classList.toggle('hit',!second);document.querySelector('.p3').classList.toggle('hit',second);document.getElementById('nearest').textContent=second?'가장 가까운 점: C':'가장 가까운 점: A'}draw();setInterval(draw,2600)