CSS と SVG だけでできるリッチな表現

JavaScript を使わず、CSS と SVG だけで描ける表現を並べる。画像や外部のライブラリも使っていない。JavaScript を使うもの（3DCG など）は、JavaScript で作るリッチな表現 にまとめた。

右上の ◐ でライトとダークを切り替えると、多くのデモは色が反転する。

リキッドグラス

Apple が WWDC 2025 で発表した「リキッドグラス」を、CSS と SVG で再現したもの。作りは lucasromerodb/liquid-glass-effect-macos を参考にした。カーソルを乗せると、弾むように少し膨らむ。

すりガラスとの違いは、ガラスの向こうの模様が歪むこと。ガラスは4枚の層でできている。

1. いちばん下の層で、背景を軽くぼかす（backdrop-filter: blur()）。
2. そのぼかした結果に、さらに SVG のフィルタ（filter: url()）をかける。ノイズから作った凹凸の地図（feTurbulence）に沿って、絵を大きくずらす（feDisplacementMap）ので、背景がうねって見える。
3. その上に、白を薄く重ねて色味を付ける。
4. いちばん上に、内側の影を白で入れて、縁が光っているように見せる。

背景の模様はゆっくり流れているので、ガラスの向こう側がうねる様子がわかる。歪みが出るのは、今のところ Chrome や Edge などの Chromium 系だけで、Firefox や Safari では歪みのないガラスとして表示される。

オーロラ

強くぼかした3つの色の円を、別々の周期でゆっくり動かしている。mix-blend-mode: screen で重なった部分が明るくなるので、光のカーテンのように見える。

光が走る文字

文字の形でグラデーションを切り抜き（background-clip: text）、そのグラデーションを横に流している。

形が変わる塊

border-radius は、縦と横の丸みを角ごとに別々に指定できる。その8つの値をアニメーションさせると、液体のように形が変わり続ける。

線で描かれる太極図

太極図を線で描いてから塗りつぶし、消してまた描き直す、を繰り返している。SVG の線を点線にして、その「点線の間隔」と「ずらす量」を線の長さと同じにしておき、ずらす量を0に戻すと、線を引いているように見える。

タイプライター

文字を入れた箱の幅を、0から13文字分まで広げている。steps(13) で1文字分ずつ段階的に広げるので、1文字ずつ打っているように見える。等幅フォントなので、ch（1文字の幅）という単位で幅を指定できる。

グリッチ

同じ文字を赤と水色で2枚重ね、それぞれを横に細く切り取って、一瞬だけずらしている。

ニューモーフィズム

背景と同じ色のボタンに、明るい影と暗い影を逆向きに付けると、粘土を押し出したような見た目になる。押すと影が内側に回って、凹んだように見える。

中身はチェックボックスで、チェックが入っているかどうか（:checked）で影を切り替えている。影の色は背景色から計算していて（color-mix()、light-dark()）、ダークにしても成立する。

進捗リング

リングが伸び、数字が数え上がる。@property で CSS 変数を「整数」として登録すると、変数そのものをアニメーションできるようになる。その変数を、円グラフ（conic-gradient）の角度と、CSS カウンターの数字の両方に使っている。

Chrome や Safari では、スクロールに合わせてリングが伸びる（animation-timeline: view()）。対応していないブラウザでは、ページを開いたときに一度だけ伸びる。

スクロールで現れる

アニメーションの進み具合を、時間ではなくスクロール量に結びつけている（animation-timeline: view()）。要素が画面に入ってくるのに合わせて、ぼかしが取れながら浮かび上がる。スクロールを戻すと、逆再生される。対応しているのは Chrome や Safari で、Firefox では最初から表示された状態になる。

流れる帯

同じ内容を2回並べて、ちょうど半分だけ横に動かし、また最初に戻している。継ぎ目がないので、途切れずに流れて見える。両端は mask で薄くしている。カーソルを乗せると止まる。

波

1本の波の形を SVG で作り、色の濃さと速さを変えて3枚重ねている。速さが少しずつ違うので、重なり方が毎回変わる。

一文字ずつ跳ねる

文字を1文字ずつ <span> に分けて、それぞれのアニメーションの開始を少しずつ遅らせている。動きの曲線（cubic-bezier）で一度行き過ぎてから戻るようにしているので、弾んで見える。

おわりに

@property や animation-timeline のように、数年前なら JavaScript が必要だったものも、CSS だけで書けるようになっている。

OS の設定で「視差効果を減らす」や「アニメーションを減らす」をオンにしている場合は、ほとんどのデモが止まった状態で表示される。