Branding the Discourse splash screen with custom SVG images

[awesomerobot (Kris)]

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:

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

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

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):

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.

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. ↩︎

[philh]

hmmmmm Discourse Logo with Throbber

[eisammy (Sammy)]

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

[Don]

Hello

@awesomerobot

If a static SVG is used, then it appears above the loading dot animation, otherwise if an animated one is used it replaces them:

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

[ばこん (ばこん(bac0n))]

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

Is there a way to enlarge it?

[awesomerobot (Kris)]

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.

[ばこん (ばこん(bac0n))]

Here it is

[awesomerobot (Kris)]

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

[ばこん (ばこん(bac0n))]

Thank you very much!

[awesomerobot (Kris)]

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.

[Falco]

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

Pairs really well with this new feature!

[Bas (Bas van Leeuwen)]

That is amazing Falco

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

[Falco]

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

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

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.

[Bas (Bas van Leeuwen)]

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

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

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

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!

[Falco]

@Bas

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

Giving up after a handful of iterations

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

[Falco]

We should do a animated Discourse splash contest!

[Canapin (Coin-coin le Canapin)]

@Bas

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

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

[keegan (Keegan George)]

@Falco

We should do a animated Discourse splash contest!

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

[noahl (Noah Lovell)]

@Falco

We should do a animated Discourse splash contest!

Wellllll - I guess I’m now joining this trend

Prompt

Convert this into an animated SVG.

Rules:

• It must be an animated SVG
• It will act as a loading icon between pages, so needs to be subtle and minimal.

Idea:

• I want to keep the overall shape with no distortion
• I think we can do something with the 3 inner shapes - some sort of rotating, similar to what you would get if you span a table tennis raquet in your hands by it’s handle

You MUST preserve the brand identity, and do not break it’s overall design - this is imperative to the brand.

Output (After 3 revisions):