Vinyl Spin

<div class="nuda-vinyl is-playing">
  <div class="nuda-vinyl__disc">
    <div class="nuda-vinyl__grooves"></div>
    <div class="nuda-vinyl__label"></div>
  </div>
</div>

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

.nuda-vinyl__disc {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,#1a1a20,#000);
  box-shadow: 0 6px 16px -4px rgba(0,0,0,.6);
  transition: transform .3s;
}

.nuda-vinyl.is-playing .nuda-vinyl__disc {
  animation: _vinylSpin 4s linear infinite;
}

.nuda-vinyl__grooves {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center,transparent 0,transparent 2px,rgba(255,255,255,.03) 3px,rgba(255,255,255,.03) 4px);
}

.nuda-vinyl__label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e4ff54;
  border: 1px solid rgba(0,0,0,.4);
}

.nuda-vinyl__label::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #09090b;
}

@keyframes _vinylSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-vinyl.is-playing .nuda-vinyl__disc {
    animation: none;
  }
}