Branding the Discourse splash screen with custom SVG images

This feature has been highly requested here on Meta Personal branding for the splash screen .

We have now added the option to add an SVG, either static or animated, as the splash screen image to replace this default loading dot indicator:

image1080×768 2.65 KB

If a static SVG is used, then it appears above the loading dot animation:

image1232×868 4.64 KB

otherwise if an animated SVG is used it replaces the dots entirely:

image1034×572 2.94 KB

Note that for performance reasons, animated SVGs should use CSS transform or opacity animations only. ^[1]

You can enable this functionality via our Upcoming Changes system ( /admin/config/upcoming-changes):

image1930×302 42.2 KB

The splash screen image site setting is used for this. You can use var(--primary), var(--secondary), and var(--tertiary) CSS variables within your SVG to reference your theme’s colors and adapt to dark mode.

image1728×488 44.2 KB

It is important to note that enabling this functionality may have impacts on your LCP score , so making the change, waiting a while, and checking if it has any impact on LCP or indexing in the Google Search console is the best way to try this out.

1. We originally attempted to allow SMIL animation elements (<animate>, <animateTransform>, etc) but these animations will be paused by the browser when javascript is executing, causing stutter. Transform and opacity CSS animations are not blocked by JS, and avoid this issue. ↩︎

hmmmmm Discourse Logo with Throbber

How I replace this dots? for me only appear to put my svg logo

Splash1920×885 32.3 KB

Hello

So it will be replaced if you use an animated SVG.

I’ve applied an SVG animation, but it appears very small.

Screenshot_20260204-2242111337×928 25.1 KB

Is there a way to enlarge it?

We don’t currently have a way to add custom CSS because this screen loads before much of the app and there are a lot more constraints. Can you share the SVG image you’re using here (or PM me with it)? I could do some testing and see if our defaults could be more accommodating.

Thanks for the reference!

I’m adding a change that will allow slightly larger dimensions, and will better center screens with static logos: UX: better centering and slightly larger experimental splash by awesomerobot · Pull Request #37574 · discourse/discourse · GitHub

I also noticed your SVG has a lot of space at the top which is impacting centering, not sure if that’s intentional, but this version removes it

Thank you very much!

Note that there’s a slight change in what we’re allowing for SVG animation (and I’ve updated OP to reflect this). Originally we were allowing SMIL animations in SVGs, but it turns out these stutter because the browser pauses this type of animation while javascript executes.

So instead the recommendation is to only use CSS transform and opacity animations in your SVGs, as these aren’t blocked by JS.

If you take a look at @ばこん’s SVG above… it provides a good example of an allowable animation:

@keyframes unique-slide {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(260px); }
}

Also be careful to give your animations unique names so they don’t clash with other animations in Discourse (names like “blink”, “rotate”, “fade” etc could be too generic). Using a prefix like unique- is a great way to avoid this.

Google just launched Gemini Pro 3.1, and their first highlight of the model was animated SVGs. Naturally I tried making a loader for https://discourse-on-a-pi5.falco.dev/ and got this after just 2 prompts

pi-2shot200×200 6.91 KB

Pairs really well with this new feature!

That is amazing Falco

I need to see what Gemini can do with the Discourse logo

Yeah, I was pretty happy with the result! I’ve been trying this for a long time with models, this is the first model that can handle it well.

Here is the prompt

Generate an animated SVG that will be used as a loading animation on a forum about the raspberry pi mini board pc. Animation must be done using SVG inline CSS.

which produced

pi200×200 6.26 KB

then I followed up with

This is great! Can you change the raspberry itself, the red haxagons, animation? They are moving diagonally from top left to botton right, but are off center and it looks weird. Maybe we keep those static and centralized and with a subtler animation?

which then produced the version I shared

pi-2shot200×200 6.91 KB

Only point of contention is that the SVG code has plenty of CSS comments like

/* Base Animation & Board Styles */

which are invalid when you save it as a SVG file, so I removed the 7 lines with those manually.

You’re getting a lot better results than I am.

Giving up after a handful of iterations, this is the best I got

notdiscourse150×150 1.2 KB

[Edit], let me add two more inbetween states:
This one was pretty good.. except that the logo was broken:

notdiscourse200×200 1.65 KB

I thought this was the most interesting one, but it really didn’t work as a logo animation (and for no apparent reason was rendered as a video with sound instead of an SVG):

Sorry all for taking this off topic Let’s get back to admiring Falco’s work and discussing the splash screen!

The Discourse logo constraint may be too harsh for it I’m afraid.

I tried

Generate an animated SVG that will be used as a loading animation on a discussion forum. The forum runs on Discourse, so it could use some of the motifs of it on the svg, like rainbow colored speech bubbles maybe? Animation must be done using SVG inline CSS.

And got

discourse200×200 3.34 KB

We should do a animated Discourse splash contest!

Did you set setting Gemini to “pro” mode? It might not be the case by default.

Made an attempt to make one in line with the new branding style

Wellllll - I guess I’m now joining this trend

Output (After 3 revisions):

svgviewer-output (69)512×512 1.56 KB

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!

loader2200×218 5.9 KB

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:

dffe8706e1d9ff4209f9d84db2cf7fa6baac5057260×260 6.22 KB

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:

image311×302 9.72 KB

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.

Thank you for the feature, I also gave it a try, I’m not completely satisfied yet but I’m fixing it

splash-loader100×100 3.08 KB

download (2)600×600 2.38 KB

image3806×1824 111 KB

Size cannot be customized

The new Gemini 3.5 Flash is even better at this

loading3120×120 4.84 KB

cup_of_ideas100×100 4.3 KB

loading_3120×120 5.71 KB

i18n120×120 6.09 KB