SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM

もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き

[youichirou]

こういう凝った指定にもちゃんと対応して破綻無く高速にレンダリングしないといけない今のブラウザってすごいなぁ…。

[perl-o-pal]

思ってたよりリアルだった。

[ginpei]

pathをanimateで動かしつて、CSSフィルタでぼかす。結構それっぽく見える。実コード開いたらanimateの指定がすごい量だった。

[mizchi]

SMILはブラウザベンダが皆嫌っていて仕様から削除されそうな気がしているので避けてる…

[nilab]

「まずはSVGで湯気の形を自由に書いてみてください」「CSSでブラー(ぼかし)エフェクト、変形などをかけつつ、下から上に湯気を動かします。（上にあがるにつれ、ブラーが強くなり透過度も高くなるように設定）」

[gazi4]

むむ、環境によってボケない

[spam_lover]

RAIZINの特設サイト思い出すな

[furakutaru]

温泉じゃないんだからもっと薄くすればいいかも

[yasu-log]

【B!】SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM

[side_tana]

kawaii

[heavenshell]

すごい

[gfx]

すごい。いかにもSVGの苦手そうな処理だけど、工夫すればこんなに自然にできるのか。

[kijtra]

いかす。むかしFlashでも煙や炎を表現する苦労があって、それ思い出した。JSなくてもCSSのdelayでいけそうだけどどうだろ。

[mohno]

すげぇ。（←分かってない^_^;）

[makou]

すげえ。画像ドラッグするとマスク画像だけドラッグになるのが頑張りました感伝わる。

[tohokuaiki]

すごかった。

[Journey]

湯気出すぎだろｗ

[sho_yamane]

canvasで湯気作ってアニメーションさせるやつやったことあるけど結構大変だったもんなー

[neet_modi_ki]

Canvasで動かすよりはお手軽っぽい

[yo_waka]

懐かしい感じ。こういうのまた作りたい

[itouhiro]

「SVGで湯気を書く。CSSでブラー(ぼかし)エフェクト、変形などをかけつつ、animateを追記して下から上に湯気を動かす。マスク画像を含む重なり順を調整」

[otchy210]

自動生成魂をかき立てられる実装だな。

[manaten]

こういうの好き

[k_ume75]

めっちゃ湯気！