Écran de démarrage Discourse avec des images SVG personnalisées

Très reptilien !

Ajoutez-en un tourné d’environ 60 degrés dans le sens antihoraire, 180 degrés autour de l’axe y, et vous aurez les yeux d’un ressuscité
Ajoutez une image miroir qui a été tournée autour de l’axe y pour obtenir deux images (yeux)

Allez Discourse un rex
oui, je n’arrive pas à me le sortir de la tête et j’ai vraiment besoin de sortir plus

2 « J'aime »

J’ai mis un chargeur de monocycle ici ! https://unicyclist.com
Génial !

L’animation originale était de moi avec CSS uniquement, et j’ai demandé à Gemini de la « convertir » (pour ainsi dire) en SVG.

10 « J'aime »

Sur l’écran de chargement de https://unicyclist.com , la barre de chargement semble s’étendre au-delà de l’arrière-plan.

1 « J'aime »

Merci. Un utilisateur a signalé ceci. Il y avait quelques bizarreries SVG (?) qui faisaient que l’image apparaissait… bizarre lorsqu’elle était téléchargée dans une publication, mais pas sur l’écran de chargement.

Par exemple, cette ancienne version :

Semble complètement cassée ici, même lorsque nous cliquons dessus (elle affiche une double barre de chargement…).
Mais elle semble correcte lorsqu’elle est utilisée comme écran de démarrage.

J’ai demandé sans réfléchir à Gemini de « la corriger », ce qui a créé le SVG que j’ai posté et qui semble OK, mais apparemment certains utilisateurs ont un problème concernant la barre de progression. Je suppose que c’est ce que vous voyez :

Je n’ai aucun problème sur Windows Chrome/Firefox ou Android/Chrome.

Je ne sais pas s’il existe un quelconque lien entre Discourse et ces problèmes.

Donc, pour rester dans le sujet, en dehors des animations non-CSS, y a-t-il des choses à savoir lorsque nous voulons utiliser un SVG animé pour un écran de démarrage ?

2 « J'aime »

J’utilise des clipPaths dans mes SVG pour empêcher les éléments de déborder.
Peut-être qu’instruire Gemini de la manière suivante serait efficace :

La barre de chargement dans ce SVG dépasse l'arrière-plan. Veuillez la modifier pour qu'elle reste dans les limites de l'arrière-plan en utilisant un clipPath.
4 « J'aime »

Merci beaucoup pour la fonctionnalité, j’ai aussi essayé, je ne suis pas encore entièrement satisfait mais je suis en train de corriger :smiley:

10 « J'aime »

La taille ne peut pas être personnalisée

Le nouveau Gemini 3.5 Flash est encore meilleur dans ce domaine

13 « J'aime »

J’ai ouvert une implémentation de brouillon connexe séparément, mais l’idée plus large est simplement un éventuel prolongement de cette fonctionnalité :

L’approche actuelle avec un seul fichier SVG utilisant var(--primary), var(--secondary) et var(--tertiary) reste la voie la plus simple et la plus épurée pour la plupart des sites, en particulier lorsque le même SVG doit simplement adapter ses couleurs.

Le cas d’usage que j’explorais est un cas limite où une page de bienvenue en mode sombre nécessite véritablement un actif différent ou un traitement optique spécifique, plutôt que de simplement recolorer le même SVG. Par exemple, un en-tête sombre pour les utilisateurs connectés peut fonctionner au mieux avec un traitement transparent spécifique pour le logo ou l’arrière-plan, tandis que la vue de connexion ou de bienvenue pour les utilisateurs anonymes peut nécessiter un arrière-plan légèrement différent en charbon ou un SVG ajusté pour un meilleur contraste.

L’idée n’est donc pas de remplacer l’approche actuelle basée sur les variables, mais de prévoir une issue de secours pour les sites où l’artwork de la page de bienvenue en mode sombre doit vraiment différer de celui de la page de bienvenue en mode clair ou par défaut.

Toute remarque est la bienvenue pour savoir si cela devrait constituer un paramètre séparé nommé splash_screen_image_dark, ou si l’approche actuelle (un seul SVG + variables de couleur) devrait rester la seule voie prise en charge.

1 « J'aime »