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
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.
Sur l’écran de chargement de https://unicyclist.com , la barre de chargement semble s’étendre au-delà de l’arrière-plan.
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 ?
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.
Merci beaucoup pour la fonctionnalité, j’ai aussi essayé, je ne suis pas encore entièrement satisfait mais je suis en train de corriger 
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.
J’ai d’abord essayé d’utiliser des SVG animés pour l’écran de chargement. Bien que cela fonctionne sur ordinateur, j’ai constaté que sur mobile, l’animation de chemins complexes ou d’éléments internes au SVG entraînait des ralentissements, voire l’arrêt complet de l’animation.
Pour garantir une expérience fluide, j’ai déplacé la logique d’animation vers un conteneur HTML standard (div) englobant le SVG. En appliquant les animations CSS (transform, scale, opacity) à la div enveloppe plutôt qu’au SVG, les navigateurs mobiles peuvent utiliser l’accélération matérielle bien plus efficacement, sans ralentissement.
Je me demande si la fonction pourrait être étendue au format WebP animé ou si elle est strictement liée aux transformations CSS.
Je veux dire, les fichiers GIF sont lourds, mais le WebP est un standard sans perte couramment utilisé de nos jours. J’obtiens 5 secondes d’animations de 200x200 px à 15 images par seconde pour 50/100 Ko. On peut même réduire davantage en limitant la boucle à 2 ou 3 secondes.
Est-il possible de prendre en charge les variantes en mode sombre/clair ?
Chaque fois que je modifie le SVG, l’interface signale une erreur lors de la téléversement, mais le fichier est bien présent et fonctionne malgré tout.
Je me réponds à moi-même, j’avais été un peu bête. Il suffit de référencer les variables CSS du schéma de couleurs de Discourse dans le SVG, l’animation s’affiche correctement pour le mode clair et sombre.
Je vois que la taille a été mentionnée. Y a-t-il des plans pour pouvoir prendre en charge une version un peu plus grande de l’animation d’écran d’accueil ?
Je recadre tout l’espace vide autour de l’animation, ce qui devrait donc donner l’impression d’une image plus grande.
