Z 패턴

<div class="page">
  <div class="logo"></div>
  <div class="navcta" id="navcta"></div>
  <div class="body-ln w70"></div>
  <div class="body-ln w40"></div>
  <button class="cta" id="cta">Get Started</button>
  <div class="dot" id="dot"></div>
</div>

.page{position:relative;width:88%;height:82%}
.logo{position:absolute;left:0;top:0;width:16%;height:12%;border-radius:4px;background:var(--muted);opacity:.6}
.navcta{position:absolute;right:0;top:2%;width:26%;height:8%;border-radius:4px;background:var(--line)}
.body-ln{position:absolute;left:0;height:9%;border-radius:3px;background:var(--line)}
.w70{width:70%;top:52%}
.w40{width:40%;top:65%}
.cta{position:absolute;right:0;bottom:2%;border:0;border-radius:8px;padding:9px 16px;background:var(--accent);color:#fff;font-weight:700;font-size:12px}
.cta.hit{animation:flash .7s ease}
@keyframes flash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle,rgba(91,91,247,.9),rgba(91,91,247,0) 70%);animation:zpath 4s ease-in-out infinite}
@keyframes zpath{
  0%{left:8%;top:6%}
  15%{left:88%;top:6%}
  50%{left:8%;top:80%}
  65%{left:8%;top:80%}
  90%{left:92%;top:92%}
  100%{left:92%;top:92%}
}

const cta = document.getElementById('cta');
setInterval(() => { cta.classList.remove('hit'); void cta.offsetWidth; cta.classList.add('hit'); }, 4000);