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.
Inizialmente ho provato a utilizzare SVG animati per la schermata di avvio. Sebbene questo funzioni sul desktop, ho scoperto che sui dispositivi mobili l’animazione diretta di percorsi complessi o elementi interni SVG provoca scatti e, in alcuni casi, l’interruzione delle animazioni.
Per garantire un’esperienza fluida, ho spostato la logica di animazione su un contenitore HTML standard (div) che avvolge l’SVG. Applicando le animazioni CSS (trasformazione, scala, opacità) al wrapper div invece che all’SVG, i browser mobili possono sfruttare l’accelerazione hardware in modo molto più efficiente, evitando scatti.
Mi chiedo se la funzione potrebbe essere estesa al formato WebP animato o se è strettamente legata alle trasformazioni CSS.
Intendo dire che i file GIF sono pesanti, ma WebP è ormai uno standard comune senza perdite. Riesco a ottenere 5 secondi di animazioni da 200x200px a 15 FPS in 50/100 kb. Si può ridurre ancora di più a 2/3 secondi in loop.
È possibile gestire le varianti in modalità scura/chiaro?
Ogni volta che modifico l’SVG, l’interfaccia segnala un errore durante il caricamento, ma il file è comunque presente e funziona.
Rispondi a me stesso, perché stavo facendo la figura dello scemo. Basta fare riferimento alle variabili CSS del tema colori di Discourse nell’SVG: l’animazione per i temi chiaro/scuro verrà resa come richiesto.
Vedo che è stato menzionato il formato. Ci sono piani per supportare una versione un po’ più grande dell’animazione di avvio?
Sto ritagliando tutto lo spazio vuoto attorno all’animazione, quindi spero che ciò dia l’impressione di un’immagine più grande.
