Upgraded version of Gabriel’s “Orbit” SVG Animation
About this version’s upgrade: The original made clever use of the transform: matrix() function by making the ‘whisp’ appear to be on a 3D plane, orbiting around a perceived sphere/circle.
It made use of a top layer semi-circle
Zero Width Tunnel Technique:
I’ve reversed the semi-circle masking overlay
<path> to a
<clipPath> opposite. It now clips the animated ‘whisp’ and hides it when it passes through the clipPath hole that was made using a zero width tunnel technique documented here: https://css-tricks.com/cutting-inner-part-element-using-clip-path/