For the circle I will consider only one element and the trick here is to rely on border coloration vs background coloration. We initially make the height/width to be 0 and we only have border thus it will be a full circle. Then we simply decrease the thickness of border while keeping the overall width the same. So we will do:

Start form width/height 0 and border-width 0

We increase border-width to create the scale effect

We decrease the border-width while increasing width/height to keep the overall width/height the same.

Now the tricky part and the small circles. For this I will rely on radial-gradient and scale. the idea is to create the small circles with gradient inside one element and using scale we will create the expanding effect.

I have created 8 circles and placed them by offseting from the center (check this answer to get more details about how background-position works: https://stackoverflow.com/a/51734530/8620333). You simply need to adjust the size, position and color of the circle like you want.

As I said, it's not perfect but very close to what you want with less of element and with the needed details so you can easily adjust the different values. It's also easy to use with any icon since you only have to add a wrapper to your icon.

I didn't add the tiny circles for simplicity but we can consider another pseudo element and easily add them: