**Animated Voice Channel Icon**

[nocturne fractal]

You can use commas for the keyframes to combine 0% and 100% btw
e.g.

@keyframes volume-icon-anim {
    0%, 100%  {color: transparent;}
    50%  {color: var(--currentColor);}
}
/* Animation when there is someone live-streaming in a voice channel */
@keyframes volume-icon-anim-live {
    0%, 100% {color: transparent;}
    50%  {color: var(--red-400);}
}```

[wicked radish]

oh wow lol, I don't know how that slipped my mind. Thanks!

[rose rain]

is there a way to have the animation play even noone is in a VC?

[nocturne fractal]

just remove the :has(...)'s

/* Change the first path definition of the volume icon SVG to be the moving part of my new animated SVG */
.containerDefault_f6f816 .iconContainer_d8bfb3 svg.icon_d8bfb3 path[d^="M15.16"] {
    d: path("M15.1 20.75c-.58.14-1.1-.33-1.1-.92v-.03c0-.5.37-.92.85-1.05a7 7 0 0 0 0-13.5A1.11 1.11 0 0 1 14 4.2v-.03c0-.6.52-1.06 1.1-.92a9 9 0 0 1 0 17.5Z");
    animation-name: volume-icon-anim;
    animation-duration: 1.25s;
    animation-iteration-count: infinite;
}
/* Change the second path definition of the volume icon SVG to be the static part of my new animated SVG */
.containerDefault_f6f816 .iconContainer_d8bfb3 svg.icon_d8bfb3 path[d^="M12"] {
    d: path("M12 3a1 1 0 0 0-1-1h-.06a1 1 0 0 0-.74.32L5.92 7H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.92l4.28 4.68a1 1 0 0 0 .74.32H11a1 1 0 0 0 1-1V3ZM15.16 16.51c-.57.28-1.16-.2-1.16-.83v-.14c0-.43.28-.8.63-1.02a3 3 0 0 0 0-5.04c-.35-.23-.63-.6-.63-1.02v-.14c0-.63.59-1.1 1.16-.83a5 5 0 0 1 0 9.02Z");
}
/* change color of animation to match Discord's "Live" icon when someone is live-streaming */
.containerDefault_f6f816:has([class*="live_"], [class*="baseShapeRound_"]) .iconContainer_d8bfb3 svg.icon_d8bfb3 path[d^="M15.16"] {
    animation-name: volume-icon-anim-live;
}
.containerDefault_f6f816:has([class*="live_"], [class*="baseShapeRound_"]) .iconContainer_d8bfb3 svg.icon_d8bfb3 path[d^="M12"] {
    color: var(--red-400);
}
/* Animation when there is someone in a voice channel */
@keyframes volume-icon-anim {
    0%, 100%  {color: transparent;}
    50%  {color: var(--currentColor);}
}
/* Animation when there is someone live-streaming in a voice channel */
@keyframes volume-icon-anim-live {
    0%, 100% {color: transparent;}
    50%  {color: var(--red-400);}
}

the selectors could probably be improved when the :has() isn't needed, but doesn't really matter

[rose rain]

thank you!

[uneven jetty]

i was hoping to see the animation only when a person speaks, seeing it play even in an afk channel is a bummer but i still like this snippet

[wicked radish]

This is possible to do, but the animation would only show when you are also in that voice channel

[nocturne fractal]

you could do it if nobody in the call has the mute icon i think

[uneven jetty]

I want it to not show the animation when nobody's speaking, i think that's a little too much to be asking for in a snippet though ;p

[wicked radish]

Yeah no that should actually be possible to do. Just change the icon when the green "speaking" outline is showing. You need to be in the voice channel to get that info though

[tawny sierra]

@wicked radish Just wanted to let you know that the icon doesn't get animated if a vc is "limited" even if you have access to the channel

as well the icon doesn't turn red if someone is screensharing in a "limited" vc either

[wicked radish]

ah thanks, I don't think I've ever used a limited VC

[wicked radish]

also I realized I never posted this CSS - all you really need is to add in a :has([class*="voiceUser_"]):has([class*="avatarSpeaking_"])

.containerDefault_f6f816:has([class*="voiceUser_"]):has([class*="avatarSpeaking_"]) .iconContainer_d8bfb3 svg.icon_d8bfb3 path[d^="M15.16"] {
  d: path("M15.1 20.75c-.58.14-1.1-.33-1.1-.92v-.03c0-.5.37-.92.85-1.05a7 7 0 0 0 0-13.5A1.11 1.11 0 0 1 14 4.2v-.03c0-.6.52-1.06 1.1-.92a9 9 0 0 1 0 17.5Z");
  animation-name: volume-icon-anim;
  animation-duration: 1.25s;
  animation-iteration-count: infinite;
}
.containerDefault_f6f816:has([class*="voiceUser_"]):has([class*="avatarSpeaking_"]) .iconContainer_d8bfb3 svg.icon_d8bfb3 path[d^="M12"] {
  d: path("M12 3a1 1 0 0 0-1-1h-.06a1 1 0 0 0-.74.32L5.92 7H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.92l4.28 4.68a1 1 0 0 0 .74.32H11a1 1 0 0 0 1-1V3ZM15.16 16.51c-.57.28-1.16-.2-1.16-.83v-.14c0-.43.28-.8.63-1.02a3 3 0 0 0 0-5.04c-.35-.23-.63-.6-.63-1.02v-.14c0-.63.59-1.1 1.16-.83a5 5 0 0 1 0 9.02Z");
}
.containerDefault_f6f816:has([class*="live_"], [class*="baseShapeRound_"]) .iconContainer_d8bfb3 svg.icon_d8bfb3 path[d^="M15.16"] {
  color: var(--red-400);
}
.containerDefault_f6f816:has([class*="live_"], [class*="baseShapeRound_"]) .iconContainer_d8bfb3 svg.icon_d8bfb3 path[d^="M12"] {
  color: var(--red-400);
}
@keyframes volume-icon-anim {
  0%   {color: transparent;}
  50%  {color: var(--currentColor);}
  100% {color: transparent;}
}
@keyframes volume-icon-anim-live {
    0%, 100% {color: transparent;}
    50%  {color: var(--red-400);}
}