DiscourseのスプラッシュスクリーンをカスタムSVG画像でブランディングする

爬虫類っぽい!

反時計回りに約60度回転させ、y軸を中心に180度回転させたものを追加すると、蘇ったものの目になる
y軸を中心に回転させた鏡像を追加して、2つの画像(目)にする

Go Discourse a rex
うん、これが頭から離れなくて、絶対にもっと外に出る必要がある

「いいね!」 2

ここに一輪車のローダーを設定しました!https://unicyclist.com
いいね!

オリジナルのアニメーションは私自身がCSSのみで作成したもので、GeminiにそれをSVGに「変換」するように依頼しました。

「いいね!」 8

https://unicyclist.com のロード画面で、ロードバーが背景からはみ出しているように見えます。

「いいね!」 1

ありがとうございます。ユーザーから報告がありました。アップロードされた画像が、読み込み画面では問題ないのに、投稿に表示されるとSVGの癖(?)で奇妙に見えることがありました。

例えば、この古いバージョン:

ここではクリックしても完全に壊れて見えます(二重の読み込みバーが表示されます)。
しかし、スプラッシュスクリーンとして使用すると正常に見えます。

私は何も考えずにGeminiに「修正して」と頼んだところ、私が投稿したSVGが作成されましたが、一部のユーザーはプログレスバーに関して問題があるようです。おそらく、あなたが見ているのはこれでしょう。

WindowsのChrome/FirefoxやAndroid/Chromeでは問題ありません。

Discourseとこれらの不具合に何らかの関係があるのかどうかはわかりません。

そこで、本題に戻りますが、CSSアニメーション以外に、アニメーションSVGをスプラッシュスクリーンとして使用する際に注意すべき点はありますか?

「いいね!」 2

SVGで要素がオーバーフローするのを防ぐためにclipPathを利用しています。
Geminiに以下のように指示すると効果的かもしれません。

このSVGのローディングバーが背景からはみ出しています。背景の範囲内に収まるように、clipPathを使って修正してください。
「いいね!」 4

機能ありがとうございます。私も試してみましたが、まだ完全に満足していませんが、修正中です :smiley:

「いいね!」 8