This took some work, but was ultimately a lot of fun to put together, using a variety of techniques.
Inkscape is particularly helpful with regards to re-positioning elements and having it pump out the paths.
Click on the pic above to view the SVG in action.
If you want to freeze the animation, just position your mouse over Planet THC.
Re the animation artifacts during scaling…
I checked it out on an iPhone 12 Max. No trails during scaling.
Ditto Chrome Canary (as of Version 91.0.4469.5 (Official Build) canary (64-bit))…
So I am not going to worry about this, and simply move on with other animations, as staying with anything too long is boring.
Chrome standard developers will eventually get their act together on this.
And if they don’t, they don’t.
PS I also wrote a pure SVG reverse scaling Pen — no trails!
However, when I replaced the CSS scaling code in the original THC animation (i.e. the SVG with the Maryjane leaves disappearing and reappearing in a time-based sequence) with SVG animation code, the artifacts returned.
This is true for both Edge and Chrome.
However, no scaling on Edge with CSS — meaning CSS seems to be better optimized in the MS browser, at least when it comes to SVG.
Interestingly, neither Edge nor Chrome are able to listen to SVG animations in the Developer’s Tool animation viewer — CSS’s only are heard; not sure why that is technically.
# # #
Now all that was left is doing something interesting with the starfield background, though this would probably be too much for my brand new Dell XPS 8940 desktop.
So, pass on that.
I may rebuild the chassis of my old desktop (that died last month) with high end components, but that requires skills I don’t feel like acquiring.
I’d much rather just buy a gaming-level rig with a 4K display.
That said, it’s now time to move on from Planet THC, and take a deeper dive into the topic of SVG animations.
# # #