Orbit SVG Code

See the Pen Enhanced Orbit SVG by Scott Wraxton (@Wraxton) on CodePen.

Upgraded version of Gabriel’s “Orbit” SVG Animation

Original: https://codepen.io/guerreiro/pen/obhzc Gabriel’s Codepen profile: https://codepen.io/guerreiro/

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-circleto obscure part of the rotation giving us the clever effect that the ‘whisp’ is passing behind the sphere/circle. This unfortunately restricted styling to block colour use for the main base circle.

Regular Clip-Path

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/