Sonar Effect Colored

by the way – if you like to have the sonar effect in the same color as the icon definition is – you can redefine the existing rules.
The trick is to use a relative color definition “currentColor”

/*** redefine the sonarEffect with "currentColor" instead of #fff  ***/
@-webkit-keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px currentColor, 0 0 0 10px rgba(255,255,255,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px currentColor, 0 0 0 10px rgba(255,255,255,0.5);-webkit-transform: scale(1.5);opacity: 0;}
}

@keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px currentColor, 0 0 0 10px rgba(255,255,255,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px currentColor, 0 0 0 10px rgba(255,255,255,0.5);transform: scale(1.5);opacity: 0;}
}

see: https://webers-testseite.de/icon-in-motion/#av_section_2