[Scott Ackerman]

Thank you a ton for the suggestions! Really helped me work through all the options in my head!

I neglected to mention the importance of transparency in the final animation and in why i was so stuck – this is an icon that will be exported with bodymovin/lottie for use in a mobile app. Unfortunately a lot of AE’s effects (layer styles) are still not fully supported or are against best practices in this workflow.

But anyway, I ended up reworking the animations a bit so that transparency wasn’t a limiting factor.
I first duplicated each of the trim paths in the wifi symbol
Set the stroke of the rear layers to white and increased by 4px to a total of 10px
Set the stroke of the top layers to match the background color of the sphere behind – effectively treating them like a mask to get the pill shape.

Then we can update the colors of the sphere and “mask” at runtime with lottie.

Heres a preview: https://www.lottiefiles.com/share/5rG01Y

Thanks again!