HTMLなどのコードを、ブラウザ上で確認ができ、公開や共有もできる開発サービスCodepen（コードペン）。
この記事では、2022年に特に人気の高かったHTMLスニペットを、ランキング形式でまとめた The Most Hearted of 2022の中から、特に印象に残った、実用性の高い作品をご紹介。
CSSのみで表現されたお手軽なHTMLスニペットから、オドロキのユーザー体験を提供したり、CSSアニメーションなどにも注目が集まっています。
HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。
2022年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
94位 Click To Zoom Calendar
クリックするとズームするカレンダーは、レスポンシブ対応のレイアウト。
See the Pen
Click To Zoom Calendar by Hyperplexed (@Hyperplexed)
on CodePen.
93位 Animated Border Gradient
色が変化するグラデーションのボーダー線を表現したCSSアニメーション。
See the Pen
Animated Border Gradient by Shaw (@shshaw)
on CodePen.
86位 Animated Border Gradient
CSSのみでスタイリングされた、アイコン付きのタブバーメニュー。
See the Pen
Iconic Tab Bar – Pure CSS by Josetxu (@josetxu)
on CodePen.
81位 Invert text on scroll with CSS variable
CSS変数を活用した、スクロールに応じて文字色が反転するテクニック。
See the Pen
Invert text on scroll with CSS variable by Craig Roblewsky (@PointC)
on CodePen.
78位 Paper craft SVG Animation
ペーパークラフトのような仕上がりをリアルに表現したSVGアニメーション。
See the Pen
Paper craft SVG animation by Uchiyama＠株式会社フォスター (@fostor_uchiyama)
on CodePen.
72位 Blurred animated gradients
アニメーションで絶えず変化する、ぼかしグラデーションのCSSテクニック。
See the Pen
Blurred animated gradients by Wil van der Tuin (@Jeromche)
on CodePen.
68位 Rotating links/buttons with text placed on a circular path
円形パスに沿って文字テキストを表示するリンク用CSSエフェクト。
See the Pen
Rotating links/buttons with text placed on a circular path by Natalia 
(@natszafraniec)
on CodePen.
64位 Scrolling rainbow – GSAP ScrollTrigger & ScrollSmoother
GSAPの慣性スクロールライブラリScroll Smotherの具体的な活用例。
See the Pen
Scrolling rainbow – GSAP ScrollTrigger & ScrollSmoother by Fabio Ottaviani (@supah)
on CodePen.
61位 Sassy Search Bar 
心地よいマイクロインタラクションが魅力的な検索バー。
See the Pen
Sassy Search Bar by Hyperplexed (@Hyperplexed)
on CodePen.
59位 Radial Nav Menu
クリックで円形に展開するナビゲーションメニュー。
See the Pen
Radial Nav Menu by Hyperplexed (@Hyperplexed)
on CodePen.
56位 CSS Blossoming Flowers at Magical Night
CSSのみでスタイリングされた、暗闇のなかでゆらゆらと揺れる花。
See the Pen
CSS Blossoming Flowers at Magical Night by Md Usman Ansari (@mdusmanansari)
on CodePen.
54位 Sliced Text Effect
同じテキスト要素を2つ重ねることで、立体的にスライスされたようなエフェクトに。
See the Pen
Sliced Text Effect by Shireen Taj (@TajShireen)
on CodePen.
53位 AI Art Generator
手持ちの画像を、AIをつかって異なる名画風に仕上げ、完成した画像はダウンロードも可能です。
See the Pen
AI Art Generator by Yannick Brandt (@Coderesting)
on CodePen.
50位 City Life – Day & Night – Pure CSS
右下にあるトグルをつかって、昼と夜の風景を切り替えることができる、CSSオンリー のスニペット。
See the Pen
City Life – Day & Night – Pure CSS by Josetxu (@josetxu)
on CodePen.
48位 Gradient background with waves
絶えず変化するグラデーションの背景に、アニメーション付きの波型ウェーブをCSSで表現したレイアウト。
See the Pen
Gradient background with waves by Bárbara Rodríguez (@baarbaracrr)
on CodePen.
46位 Sketch Button
マウスホバーすると、キラリと輝くCTAボタン。
See the Pen
Sketch Button by Aaron Iker (@aaroniker)
on CodePen.
42位 Jello Stretchy Variable Font
テキストをドラッグすると、ゼリーのようにぷるるんと動くエフェクトで、Variableフォントを利用しています。
See the Pen
Jello Stretchy Variable Font by Pete Barr (@petebarr)
on CodePen.
39位 Stroke Logo Animation
シンプルですが、印象的なストロークアニメーションによるロゴ展開。
See the Pen
Stroke Logo Animation by Jon Kantner (@jkantner)
on CodePen.
37位 Magical Text Effect
テキストリンクをアニメーション付きグラデーションカラーにし、キラリとした星シェイプを追加します。
See the Pen
Magical Text Effect by Hyperplexed (@Hyperplexed)
on CodePen.
31位 Codepen Challenge: Huge Headers/Mega Menus
右上にあるハンバーガーメニューをクリックすると、フルスクリーンで展開するメガメニュー向けスニペット。
See the Pen
Codepen Challenge: Huge Headers/Mega Menus by Sicontis (@Sicontis)
on CodePen.
30位 Gallery Example
マウススクロールに合わせて、上下左右、縦横無尽に移動するギャラリー。
ブルッと震えるグリッチエフェクトも秀悦。
See the Pen
Gallery Example by Toshiya Marukubo (@toshiya-marukubo)
on CodePen.
27位 Card Hover Effect
カード型レイアウトにホバーすると、控えめながら、押したくなるエフェクトを背景に追加。
See the Pen
Card hover effect by Aaron Iker (@aaroniker)
on CodePen.
25位 CSS Glassmorphism Button Hover Effects | Glass Morphism
すりガラスのような半透明エフェクト、グラスモーフィズムをCSSで表現したボタンエフェクト集。
See the Pen
CSS Glassmorphism Button Hover Effects | Glass Morphism by Katarzyna Marta Kuich (@katarzynamarta)
on CodePen.
20位 Responsive NFT Landing Page
NFTマーケットプレイスを想定した、レスポンシブデザイン対応のWebレイアウト。
See the Pen
Responsive NFT Landing Page by Erkan Erdil (@erkanerdil016)
on CodePen.
13位 Liquid Transition Effect
See the Pen
Liquid Transition Effect by Aysenur Turk (@TurkAysenur)
on CodePen.
11位 Forest Landing Page
CSSのみで表現可能な、パララックスエフェクトを実現した、コンテンツ向けスニペット。
See the Pen
Forest Landing Page by Robert Gil Baptista (@robertgbaptista)
on CodePen.
9位 Pokemon Cards Holo effect v2
最新オンラインツールでも話題となっていた、キラキラのホログラフィック効果を、CSSオンリーで表現できるライブラリ。
各種キラキラが、ずらり揃います。
See the Pen
Pokemon Cards Holo effect v2 by Simon Goellner (@simeydotme)
on CodePen.
8位 Sidebar Interaction
ワンクリックでサイズ伸縮でき、スペースを確保できる垂直型ナビゲーションメニュー。
ダークモードの切り替えにも対応しています。
See the Pen
Sidebar Interaction by Aybüke Ceylan (@aybukeceylan)
on CodePen.
5位 Infinite Scroll Animation
左右にスクロールする無限アニメーションは、CSSのみで表現できる便利なテクニック。
See the Pen
Infinite Scroll Animation by Yoav Kadosh (@ykadosh)
on CodePen.
3位 Animated Continuous Sections with GSAP Observer
GSAP Observerをつかうことで、スクロール動作を自由に調整できる、無限につづくコンテンツスライダーのサンプル例。
See the Pen
Animated Continuous Sections with GSAP Observer by GreenSock (@GreenSock)
on CodePen.
2位 CSS Marquee Logo Wall
上下または左右に流れる、マーキー風スクロールアニメーションをCSSで再現。
左上にあるボタンで、スクロール方向を切り替え可能です。
See the Pen
CSS Marquee Logo Wall by Ryan Mulligan (@hexagoncircle)
on CodePen.
1位 App Menu With Lock Screen
映えある一位は、ロックスクリーン付きのアプリメニュー。パスワード入力でログインできます。
See the Pen
App Menu With Lock Screen by Hyperplexed (@Hyperplexed)
on CodePen.
2021年、2020年の人気スニペットはこちら。
ものすごいスピードで、進化を続けるウェブの世界をのぞいてみませんか。
2022年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表はPhotoshopVIPで公開された投稿です。