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.
I initially tried to use animated SVG for the splash screen. While this works on desktop, I found that on mobile, animating complex paths or SVG-internal elements directly, results in lagging and even animation stopping.
To ensure a smooth experience, I shifted the animation logic to a standard HTML container (div) wrapped around the SVG. By applying the CSS animations (transform, scale, opacity) to the div wrapper instead of the SVG, mobile browsers can use hardware acceleration much more efficiently without lagging.
I wonder if the function could be extended to the animated WebP format or if it is strictly tied to CSS transformations?
I mean, GIF files are heavy, but WebP is a lossless common standard nowadays. I get 5 seconds of 200x200px animations at 15 FPS into 50/100 kb. It can be reduced even more into 2/3 seconds on a loop.
Is it possible to cater for dark/light mode variants?
Every time I change the svg, the UI reports an error during upload but it is there and works regardless.
Replying to myself as I was being daft. Just reference the Discourse colour scheme CSS variables in the SVG, it renders the animation for light/dark as required.
I see size was mentioned. Are there any plans to be able to support a somewhat larger version of the splash animation?
I’m cropping all the empty space around the animation, so hopefully that creates the impression of a larger image.
