Compass

<div class="nuda-compass">
  <div class="nuda-compass__face">
    <span class="nuda-compass__n">N</span>
    <span class="nuda-compass__needle"></span>
  </div>
</div>

.nuda-compass {
  position: relative;
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nuda-compass__face {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,#1a1a20,#0c0c10);
  border: 2px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05),0 6px 16px -6px rgba(0,0,0,.6);
  animation: _compRot 6s ease-in-out infinite;
}

.nuda-compass__n {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  color: #ff5e7a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
}

.nuda-compass__needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 30px solid #e4ff54;
  transform: translate(-50%,-100%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 4px #e4ff54);
}

.nuda-compass__needle::after {
  content: '';
  position: absolute;
  left: -5px;
  top: 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 30px solid #63636e;
  transform: translateY(30px);
}

@keyframes _compRot {
  0%,100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-18deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-compass__face {
    animation: none;
  }
}