Discourse-Startbildschirm mit benutzerdefinierten SVG-Bildern branden

Sehr reptilienhaft!

Fügen Sie eines hinzu, das um etwa 60 Grad gegen den Uhrzeigersinn und um 180 Grad um die y-Achse gedreht ist, und Sie haben die Augen eines wiederauferstandenen
Fügen Sie ein Spiegelbild hinzu, das um die y-Achse gedreht wurde, sodass zwei Bilder (Augen) entstehen

Geh, Diskurs, ein Rex
jep, kriege das nicht aus dem Kopf und muss definitiv mehr rausgehen

2 „Gefällt mir“

Ich habe hier einen Einrad-Lader eingestellt! https://unicyclist.com
Schön!

Die ursprüngliche Animation stammt von mir, nur mit CSS, und ich habe Gemini gebeten, sie (sozusagen) in SVG umzuwandeln.

10 „Gefällt mir“

Auf dem Ladebildschirm von https://unicyclist.com scheint sich der Ladebalken über den Hintergrund hinaus zu erstrecken.

1 „Gefällt mir“

Danke. Ein Benutzer hat dies gemeldet. Es gab einige SVG-Eigenheiten (?), die das Bild … seltsam erscheinen ließen, wenn es in einen Beitrag hochgeladen wurde, aber nicht auf dem Ladebildschirm.

Zum Beispiel diese ältere Version:

Sieht hier völlig fehlerhaft aus, selbst wenn wir darauf klicken (es zeigt einen doppelten Ladebalken an…).
Sieht aber gut aus, wenn sie als Startbildschirm verwendet wird.

Ich habe Gemini gedankenlos gebeten, „es zu reparieren“, was das SVG erstellt hat, das ich gepostet habe und das in Ordnung aussieht, obwohl bestimmte Benutzer anscheinend ein Problem mit dem Fortschrittsbalken haben. Ich nehme an, das ist es, was Sie sehen:

Ich habe unter Windows Chrome/Firefox oder Android/Chrome keine Probleme.

Ich weiß nicht, ob es irgendeinen Zusammenhang zwischen Discourse und diesen Störungen gibt.

Um beim Thema zu bleiben: Gibt es abgesehen von Nicht-CSS-Animationen Dinge zu beachten, wenn wir ein animiertes SVG für einen Startbildschirm verwenden möchten?

2 „Gefällt mir“

Ich verwende clipPaths in meinen SVGs, um zu verhindern, dass Elemente überlaufen.
Vielleicht wäre es effektiv, Gemini wie folgt anzuweisen:

Der Ladebalken in diesem SVG ragt über den Hintergrund hinaus. Bitte ändern Sie ihn so ab, dass er innerhalb der Grenzen des Hintergrunds bleibt, indem Sie einen clipPath verwenden.
4 „Gefällt mir“

Vielen Dank für das Feature, ich habe mich auch mal versucht ich bin zwar noch nicht ganz zufrieden aber ich bin am fixen :smiley:

10 „Gefällt mir“

Größe kann nicht angepasst werden

Das neue Gemini 3.5 Flash ist darin noch besser

13 „Gefällt mir“

Ich habe separat eine verwandte Entwurfsimplementierung eröffnet, aber die übergeordnete Idee ist lediglich ein möglicher Folgepunkt zu diesem Feature:

Der aktuelle Ansatz mit einem einzigen SVG unter Verwendung von var(--primary), var(--secondary) und var(--tertiary) bleibt für die meisten Websites der sauberste und einfachste Weg, insbesondere dort, wo dasselbe SVG lediglich seine Farben anpassen muss.

Der Anwendungsfall, den ich untersucht habe, ist der Randfall, in dem ein Splash-Bild im Dunkelmodus tatsächlich ein anderes Asset oder eine andere optische Behandlung erfordert, anstatt dasselbe SVG lediglich neu einzufärben. Beispielsweise könnte ein dunkler Header für eingeloggte Benutzer am besten mit einer transparenten Logo-/Hintergrundbehandlung funktionieren, während die anonyme Login-/Splash-Ansicht möglicherweise einen leicht anderen Kohlegrau-Hintergrund oder ein angepasstes SVG für besseren Kontrast benötigt.

Die Idee besteht also nicht darin, den aktuellen variablenbasierten Ansatz zu ersetzen, sondern eine Ausweichmöglichkeit für Websites bereitzustellen, bei denen die Splash-Grafik im Dunkelmodus tatsächlich von der Splash-Grafik im hellen/Standardmodus abweichen muss.

Feedback ist willkommen: Sollte dies als separate Einstellung splash_screen_image_dark implementiert werden, oder sollte der bestehende Ansatz mit einem einzigen SVG plus Farbvariablen weiterhin der einzige unterstützte Weg bleiben?

1 „Gefällt mir“