サーキュラーオーディオビジュアライザー

<div class="circle07-12-02">
          <div class="center07-12-02"></div>
          <div class="bars07-12-02">
            <span style="transform:rotate(0deg) translateY(-70px); animation-delay:-1.1s"></span>
            <span style="transform:rotate(22.5deg) translateY(-70px); animation-delay:-0.9s"></span>
            <span style="transform:rotate(45deg) translateY(-70px); animation-delay:-0.7s"></span>
            <span style="transform:rotate(67.5deg) translateY(-70px); animation-delay:-0.5s"></span>
            <span style="transform:rotate(90deg) translateY(-70px); animation-delay:-0.3s"></span>
            <span style="transform:rotate(112.5deg) translateY(-70px); animation-delay:-1.0s"></span>
            <span style="transform:rotate(135deg) translateY(-70px); animation-delay:-0.8s"></span>
            <span style="transform:rotate(157.5deg) translateY(-70px); animation-delay:-0.6s"></span>
            <span style="transform:rotate(180deg) translateY(-70px); animation-delay:-0.4s"></span>
            <span style="transform:rotate(202.5deg) translateY(-70px); animation-delay:-0.2s"></span>
            <span style="transform:rotate(225deg) translateY(-70px); animation-delay:-1.15s"></span>
            <span style="transform:rotate(247.5deg) translateY(-70px); animation-delay:-0.95s"></span>
            <span style="transform:rotate(270deg) translateY(-70px); animation-delay:-0.75s"></span>
            <span style="transform:rotate(292.5deg) translateY(-70px); animation-delay:-0.55s"></span>
            <span style="transform:rotate(315deg) translateY(-70px); animation-delay:-0.35s"></span>
            <span style="transform:rotate(337.5deg) translateY(-70px); animation-delay:-0.15s"></span>
          </div>
        </div>

.d07-12-02{ background:#111827; }
        .d07-12-02 .circle07-12-02{ position:relative; width:200px; height:200px; }
        .d07-12-02 .center07-12-02{ position:absolute; top:50%; left:50%; width:46px; height:46px; border-radius:50%; background:radial-gradient(circle,#818cf8,#4338ca); transform:translate(-50%,-50%); box-shadow:0 0 18px rgba(129,140,248,.6); }
        .d07-12-02 .bars07-12-02{ position:absolute; inset:0; }
        .d07-12-02 .bars07-12-02 span{ position:absolute; top:50%; left:50%; width:4px; height:22px; margin:-11px 0 0 -2px; border-radius:2px; background:linear-gradient(180deg,#c4b5fd,#6366f1); transform-origin:2px 70px; animation:circ1352wave 1.4s ease-in-out infinite; }
        @keyframes circ1352wave{
          0%,100%{ opacity:.55; }
          50%{ opacity:1; }
        }
        @media (prefers-reduced-motion: reduce){
          .d07-12-02 .bars07-12-02 span{ animation:none; opacity:.85; }
        }