Molto rettiliano!
Aggiungine uno ruotato di circa 60 gradi in senso antiorario di 180 gradi sull’asse y e ottieni gli occhi di un resuscitato
Aggiungi un’immagine speculare ruotata sull’asse y in modo da avere due immagini (occhi)
Vai Discourse un rex
sì, non riesco a togliermelo dalla testa e di sicuro devo uscire di più
Ho impostato un caricatore per monociclo qui! https://unicyclist.com
Bello!
L’animazione originale è stata creata da me solo con CSS, e ho chiesto a Gemini di “convertirla” (per così dire) in SVG.
Sulla schermata di caricamento di https://unicyclist.com , la barra di caricamento sembra estendersi oltre lo sfondo.
Grazie. Un utente ha segnalato questo. C’erano alcune stranezze SVG (?) che facevano apparire l’immagine… strana, quando caricata in un post, ma non nella schermata di caricamento.
Ad esempio, questa versione precedente:
Sembra completamente rotta qui, anche quando ci si clicca sopra (mostra una doppia barra di caricamento…).
Ma sembra a posto quando viene usata come schermata di avvio.
Ho chiesto ingenuamente a Gemini di “risolverlo”, il che ha creato l’SVG che ho pubblicato e che sembra ok, anche se apparentemente alcuni utenti hanno un problema riguardo alla barra di avanzamento. Suppongo che questo sia ciò che vedete:
Io non ho alcun problema su Windows Chrome/Firefox o Android/Chrome.
Non so se ci sia qualche tipo di relazione tra Discourse e questi problemi.
Quindi, per rimanere in tema, oltre alle animazioni non-CSS, ci sono alcune cose di cui essere consapevoli quando si vuole usare un SVG animato per una schermata di avvio?
Utilizzo i clipPath nei miei SVG per impedire agli elementi di traboccare.
Forse istruire Gemini nel seguente modo sarebbe efficace:
La barra di caricamento in questo SVG si estende oltre lo sfondo. Modificala in modo che rimanga entro i limiti dello sfondo utilizzando un clipPath.
Grazie mille per la funzione, ho provato anch’io, non sono ancora del tutto soddisfatto ma sto sistemando 
Ho aperto separatamente un’implementazione di bozza correlata, ma l’idea più ampia è semplicemente un possibile seguito di questa funzionalità:
L’attuale approccio con un singolo SVG che utilizza var(--primary), var(--secondary) e var(--tertiary) rimane la via più pulita e semplice per la maggior parte dei siti, specialmente quando lo stesso SVG deve solo adattare i propri colori.
Il caso d’uso che stivo esplorando è un caso limite in cui una schermata di benvenuto in modalità scura richiede un asset genuinamente diverso o un trattamento ottico specifico, anziché limitarsi a ricolorare lo stesso SVG. Ad esempio, un’intestazione scura per utenti autenticati potrebbe funzionare al meglio con un trattamento trasparente diverso per il logo o lo sfondo, mentre la visualizzazione di accesso/schermata di benvenuto per utenti anonimi potrebbe richiedere uno sfondo leggermente diverso in grigio antracite o un SVG modificato per garantire un migliore contrasto.
L’idea non è quindi sostituire l’attuale approccio basato sulle variabili, ma fornire una via di fuga per i siti in cui l’arte della schermata di benvenuto in modalità scura deve effettivamente differire da quella della schermata di benvenuto in modalità chiara/predefinita.
Sono benvenute opinioni su whether questo dovrebbe essere gestito come un’impostazione separata splash_screen_image_dark o se l’approccio esistente con singolo SVG + variabili di colore debba rimanere l’unica via supportata.
