This is where all the trial and error work of the previous posts comes together.
As you can see, this is a greatly improved version.
I added a grid (which I lifted from my XVG app) to help me center everything, and also used Flexbox to make it responsive.
Notice how the logo stays sharp even when you zoom in on your browser.
That’s the beauty of SVG2.
This animation is a “pure” CSS3 implementation (i.e., no JS).
Next (and final) step, I’m going to add a D8 text element that zooms around the circle in a arc.
That will make use of several advanced SVG2 features.
# # #