Very reptilian!
Add one rotated about 60 degrees counter clockwise 180 degrees about the y axis and you the eyes of a resurrected
Add a mirror image that has been rotated about the y axis so two images (eyes)
Go Discourse a rex
yep, can’t get this out of my head and definitely need to get out more
I’ve set a unicycle loader here! https://unicyclist.com
Neat!
The original animation was by me with CSS only, and I asked Gemini to “convert” it (so to speak) to SVG.
On the loading screen of https://unicyclist.com , the loading bar seems to extend beyond the background.
Thank you. A user reported this. There were some SVG quirks (?) that made the image appears… Weird, when uploaded to a post, but not on the loading screen.
For example, this olders version:
Looks completely broken here, even when we click on it (it shows a double loading bar…).
But looks fine when used as a splash screen.
I brainlessly asked Gemini to “fix it”, which created the SVG I posted and looks OK, yet apparently certain users have an issue regardint the progress bar. I suppose this is what you see:
I don’t have any issue on Windows Chrome/Firefox or Android/Chrome.
I don’t know if there’s any kind of relationship between Discourse and those glitches.
So, to stay in topic, besides non-CSS animations, are there some things to be aware of when we want to use an animated SVG for a splash screen?
I utilize clipPaths in my SVGs to prevent elements from overflowing.
Perhaps instructing Gemini in the following manner would be effective:
The loading bar in this SVG is extending beyond the background. Please modify it to ensure it remains within the confines of the background using a clipPath.
I opened a related draft implementation separately, but the broader idea is simply a possible follow-up to this feature:
The current single-SVG approach with var(--primary), var(--secondary), and var(--tertiary) is still the clean/simple path for most sites, especially where the same SVG just needs to adapt its colours.
The use case I was exploring is the edge case where a dark-mode splash needs a genuinely different asset or optical treatment, rather than just recolouring the same SVG. For example, a logged-in dark header may work best with one transparent logo/background treatment, while the anonymous login/splash view may need a slightly different charcoal background or adjusted SVG for better contrast.
So the idea is not to replace the current variable-based approach, but to provide an escape hatch for sites where the dark splash artwork really does need to differ from the light/default splash artwork.
Feedback welcome on whether this belongs as a separate splash_screen_image_dark setting, or whether the existing single-SVG + colour-variable approach should remain the only supported route.
