더치 앵글

<div class="wrap">
  <div class="hline"></div>
  <div class="frame" id="frame">
    <div class="sky"></div>
    <div class="build b1"></div>
    <div class="build b2"></div>
    <div class="build b3"></div>
  </div>
  <div class="level">
    <div class="track"><i id="dot"></i></div>
  </div>
  <span class="deg" id="deg">0°</span>
</div>

.wrap{position:absolute;inset:0}
.hline{position:absolute;left:6%;right:6%;top:50%;height:1px;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}
.frame{position:absolute;left:12%;top:12%;width:66%;height:70%;overflow:hidden;border-radius:6px;
  box-shadow:0 0 0 1px var(--line)}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,#a9d3ee,#e7ecd8 70%)}
.build{position:absolute;bottom:0;background:#2c2f3d}
.b1{left:6%;width:16%;height:44%}
.b2{left:26%;width:20%;height:66%}
.b3{left:52%;width:24%;height:36%}
.level{position:absolute;right:6%;top:8%;width:24%;aspect-ratio:2.4;border-radius:20px;border:1px solid var(--line);
  display:grid;place-items:center;background:var(--surface)}
.track{position:relative;width:82%;height:60%}
.track i{position:absolute;top:50%;width:26%;aspect-ratio:1;border-radius:50%;background:var(--accent-3);
  transform:translate(-50%,-50%);left:50%}
.deg{position:absolute;right:6%;top:24%;font:700 11px ui-monospace,monospace;color:var(--muted)}

const frame=document.getElementById('frame');
const dot=document.getElementById('dot');
const deg=document.getElementById('deg');
function loop(t){
  const angle=Math.sin(t*0.0009)*18;
  frame.style.transform='rotate('+angle.toFixed(1)+'deg)';
  const ratio=angle/18;
  dot.style.left=(50+ratio*36)+'%';
  dot.style.background=Math.abs(angle)<3 ? 'var(--accent-3)' : '#ff5c6a';
  deg.textContent=Math.abs(angle).toFixed(0)+'°';
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);