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
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.
Auf dem Ladebildschirm von https://unicyclist.com scheint sich der Ladebalken über den Hintergrund hinaus zu erstrecken.
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?
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.
Vielen Dank für das Feature, ich habe mich auch mal versucht ich bin zwar noch nicht ganz zufrieden aber ich bin am fixen 
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?
Anfangs versuchte ich, für den Splash-Screen animierte SVGs zu verwenden. Während dies auf Desktop-Geräten funktioniert, stellte ich fest, dass die direkte Animation komplexer Pfade oder SVG-interner Elemente auf Mobilgeräten zu Rucklern und sogar zum Stillstand der Animation führt.
Um ein flüssiges Erlebnis zu gewährleisten, verlagerte ich die Animationslogik auf einen standardmäßigen HTML-Container (div), der das SVG umgibt. Indem ich die CSS-Animationen (transform, scale, opacity) auf den div-Wrapper anstatt auf das SVG anwende, können Mobilbrowser die Hardwarebeschleunigung viel effizienter nutzen, ohne dass es zu Rucklern kommt.
Ich frage mich, ob die Funktion auf das animierte WebP-Format erweitert werden kann oder ob sie strikt an CSS-Transformationen gebunden ist?
Ich meine, GIF-Dateien sind schwer, aber WebP ist heutzutage ein gängiger verlustfreier Standard. Ich bekomme 5 Sekunden Animationen in 200x200px bei 15 FPS auf 50/100 kb. Auf einem Loop lässt es sich sogar noch weiter auf 2/3 Sekunden reduzieren.
Ist es möglich, Varianten für den dunklen/hellen Modus zu berücksichtigen?
Jedes Mal, wenn ich die SVG-Datei ändere, meldet die UI beim Hochladen einen Fehler, aber die Datei ist trotzdem vorhanden und funktioniert auch.
Ich antworte mir selbst, da ich gerade etwas Dummes gemacht habe. Man muss in der SVG einfach auf die CSS-Variablen der Discourse-Farbschema verweisen, dann wird die Animation für den hellen und dunklen Modus wie gewünscht gerendert.
Ich habe gesehen, dass die Größe erwähnt wurde. Gibt es Pläne, eine etwas größere Version der Splash-Animation zu unterstützen?
Ich schneide den gesamten leeren Raum um die Animation herum aus, sodass sich hoffentlich der Eindruck eines größeren Bildes ergibt.
