Animated Pulsing Equalizer Knob

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="pulse-knob-wrap"><div class="pulse-ring"></div><div class="pulse-knob"><div class="pulse-indicator"></div></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.pulse-knob-wrap { position: relative; width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; }
.pulse-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #10b981; animation: knobPulse 2s infinite ease-out; opacity: 0; }
.pulse-knob { width: 60px; height: 60px; border-radius: 50%; background: #18181b; border: 2px solid #27272a; position: relative; display: flex; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.5); transform: rotate(45deg); transition: transform 0.3s ease; }
.pulse-knob:hover { transform: rotate(135deg); }
.pulse-indicator { position: absolute; top: 6px; width: 4px; height: 10px; background: #10b981; border-radius: 2px; box-shadow: 0 0 8px #10b981; }
@keyframes knobPulse { 0% { transform: scale(0.7); opacity: 0.8; } 100% { transform: scale(1.15); opacity: 0; } }