爬虫類っぽい！
反時計回りに約60度回転させ、y軸を中心に180度回転させたものを追加すると、蘇ったものの目になる
y軸を中心に回転させた鏡像を追加して、2つの画像（目）にする
Go Discourse a rex
うん、これが頭から離れなくて、絶対にもっと外に出る必要がある
「いいね！」 2
ここに一輪車のローダーを設定しました！https://unicyclist.com
いいね！
オリジナルのアニメーションは私自身がCSSのみで作成したもので、GeminiにそれをSVGに「変換」するように依頼しました。
「いいね！」 10
https://unicyclist.com のロード画面で、ロードバーが背景からはみ出しているように見えます。
「いいね！」 1
ありがとうございます。ユーザーから報告がありました。アップロードされた画像が、読み込み画面では問題ないのに、投稿に表示されるとSVGの癖（？）で奇妙に見えることがありました。
例えば、この古いバージョン:
ここではクリックしても完全に壊れて見えます（二重の読み込みバーが表示されます）。
しかし、スプラッシュスクリーンとして使用すると正常に見えます。
私は何も考えずにGeminiに「修正して」と頼んだところ、私が投稿したSVGが作成されましたが、一部のユーザーはプログレスバーに関して問題があるようです。おそらく、あなたが見ているのはこれでしょう。
WindowsのChrome/FirefoxやAndroid/Chromeでは問題ありません。
Discourseとこれらの不具合に何らかの関係があるのかどうかはわかりません。
そこで、本題に戻りますが、CSSアニメーション以外に、アニメーションSVGをスプラッシュスクリーンとして使用する際に注意すべき点はありますか？
「いいね！」 2
SVGで要素がオーバーフローするのを防ぐためにclipPathを利用しています。
Geminiに以下のように指示すると効果的かもしれません。
このSVGのローディングバーが背景からはみ出しています。背景の範囲内に収まるように、clipPathを使って修正してください。
「いいね！」 4
関連するドラフト実装は別途オープンしましたが、より広範なアイデアは、単にこの機能の可能なフォローアップに過ぎません。
現在の単一 SVG 方式（var(--primary)、var(--secondary)、var(--tertiary) を使用）は、特に同じ SVG の色を調整するだけでよいサイトにとって、最もクリーンでシンプルなアプローチです。
私が検討していたユースケースは、ダークモードのスプラッシュで単なる再着色ではなく、真に異なるアセットや視覚的処理が必要な極端なケースです。例えば、ログイン済みのダークヘッダーには、1 つの透明なロゴや背景処理が最適である一方、匿名のログイン/スプラッシュビューには、より良いコントラストのためにわずかに異なるチャコール背景や調整された SVG が必要になる場合があります。
したがって、このアイデアは現在の変数ベースのアプローチを置き換えるものではなく、ダークスプラッシュの artwork がライト/デフォルトのスプラッシュ artwork と実際に異なる必要があるサイト向けの回避策を提供するものです。
これが独立した splash_screen_image_dark 設定として実装されるべきか、それとも既存の単一 SVG + 色変数のアプローチを唯一のサポート対象ルートとして維持すべきかについて、フィードバックをお待ちしています。
「いいね！」 1