Harita üret
Yuvarlatılmış dikdörtgenin işaretli mesafe fonksiyonundan bir PNG çizilir; kırmızı kanal yatay, yeşil kanal dikey kaymayı kodlar.
SVG feDisplacementMap
backdrop-filter
Live playground
Building glass for the web
Liquid Glass
Playground
Gerçek zamanlı sıvı cam. Bir bileşen seç — buton, navigasyon, dock, kart, switch — ve her cam yüzeyi arkasındaki içeriği bir SVG yer değiştirme haritasıyla bükerek kırsın. Aşağıda kaydıraçlarla canlı ayarla, galeriden hazır örnekleri tek tıkla yükle.
Drag the lens
Sürüklenebilir cam mercek
Camı sahnenin üzerinde gezdir; kenarlarda kırılma, ortada büyütme ve renk saçılması gerçek zamanlı hesaplanır.
Drag me
Playground
Cam bileşen üreteci
Bir bileşen ve arka plan seç, kaydıraçlarla camı şekillendir. Değişiklikler canlı uygulanır.
Examples
Hazır örnekler
Tek tıkla yukarıdaki playground'a yükle, sonra üzerinde oyna.
How it works
feDisplacementMap, kısaca
Arka planı büktür
feDisplacementMap her pikseli haritaya göre öteler — kenarlarda büyük, merkezde sıfır kayma → cam kırılması.
backdrop-filter ile uygula
Filtre backdrop-filter: url(#id) ile elemanın arkasındaki canlı içeriğe bağlanır; üstüne blur, doygunluk ve specular parlama eklenir.