火/炎を再現したコードスニペット8選。超リアルなエフェクトからイラスト風まで

焚き火やロウソクの炎に、見惚れてしまった経験はありませんか？

炎は人の本能に訴えかける、とても魅力的なマテリアルです。

Webデザインの世界でもまた、炎のゆらめきを再現しようと、これまで長く研究されてきました。

今回はCodePenのアーカイブから、炎を再現したコードスニペットを8つをご紹介します。

1. SVG on Fire

See the Pen SVG Fire ? by Steve Gardner (@ste-vg) on CodePen.

近年、爆発的に増加しているSVGアニメーション。シャープなベクター画像に、動きを加えられるのが魅力です。

実際の炎の代わりに「セロファン」を使って暖炉を再現したようなエフェクトですね。細かい火花の表現に、こだわりが見られます。

2. Fun Flames

See the Pen campfire by Short (@short) on CodePen.

こちらはCSSのみで作られたエフェクト。リズミカルにジャンプする炎のバーが、グラフィックイコライザーを連想させます。

リアルな炎というよりは、デフォルメ化されたポップでかわいい炎ですね。

3. Candle in the (Strong) Wind

See the Pen Flame in the wind by Blake Bowen (@osublake) on CodePen.

リアルな炎のコードスニペットを探しているなら、JavaScriptを使ったこちらのエフェクトがおすすめ。炎そのものだけでなく、背景を照らす光にもこだわりが感じられます。

Webデザインに効果的に取り入れるためには、動きを遅くしたほうが良いかもしれません。

4. Hot Logo

See the Pen Oak Stave : SVG Logo Animation by DroidPinkman (@dennisgaebel) on CodePen.

ひとつ前のような激しい炎だけでなく、このようなちょっとした動きの炎も魅力的です。あまり主張しすぎないほうが、Webデザインにマッチする場合もあります。

レトロスタイルのロゴに現代的なタッチが加わった、魅力的な表現ですね。

5. Game Over?

See the Pen Bitfire ? by J Scott Smith (@jscottsmith) on CodePen.

8bitグラフィックもまた、人の目をひく表現です。「炎 × 8bit」の強力な要素が調和しているのが、レトロゲームを思わせるこちらのエフェクト。

カーソルを追尾するギミックも搭載されています。

6. Flying Through Space

See the Pen CSS wormhole by Indrek Paas (@indrekpaas) on CodePen.

ワームホールのような、独特なエフェクト。HTMLとCSSだけで作られています。

シームレスな背景といくつかの動作で、圧倒的なインパクトを実現しています。

7. It’s Bubbly

See the Pen Simple CSS-only Fire Animation by Satrio Yamanda (@yamanda) on CodePen.

液体のような、ユニークなデザインの炎エフェクト。ストーリーテリングに炎のイラストを活用するなら、ぜひ参考にしたい作品です。

動きは繊細で、ユニークでありながらも確かな炎らしさを残しています。

8. Time Stands Still

See the Pen Fire by Michal (@Mertl) on CodePen.

燃えあがる炎のエフェクトを背景全体に使用するのは、ちょっと派手すぎる気がしませんか？

このスニペットでは、炎全体を動かすのではなく、炎を静止画にして火花のみを動かしています。ちょっとした工夫で、派手さをうまく軽減していますね。

おわりに

炎をメインテーマとして取り入れるWebサイトは、あまり多くないかもしれません。しかしキャンプ、アウトドア、怪談など、特定のトピックでは確かな需要があります。

ひと口に炎といっても、そのデザインは千差万別です。Webサイトのテーマにあわせて、マッチする炎エフェクトを取り入れてみてください。

執筆：Eric Karkovack
翻訳：Nakajima Asuka
編集：内田一良（じきるう）

こちらもおすすめ！▼