{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "svg-filter-verzerrung", "name": "SVG-Filter-Verzerrung (Turbulenz und Gooey) für Bild und Text", "name_en": "SVG filter hover (gooey, turbulence distortion) / SVG filter text distortion (gooey, turbulence, organic)", "kurz": "Kategorienwörter und Stoffbilder wabern beim Hover kurz per feTurbulence und feDisplacementMap, die Kampagnenzeile verschmilzt per Gooey-Filter von Herbst zu Winter; am Ende ist alles wieder scharf.", "kategorie": "Hover", "kategorie_slug": "hover", "kategorie_nr": 7, "bau_chat": "C4", "prioritaet": "C", "trendstatus": "abklingend", "belegstatus": "quellenbelegt", "website_belege": 0, "stimmung": [ "filmisch", "warm", "experimentell" ], "stimmung_roh": [ "experimentell", "organisch", "künstlerisch", "verträumt" ], "technik": [ "svg", "gsap", "css" ], "technik_gruppen": [ "css", "gsap", "canvas" ], "leistungskosten": "mittel", "steckbrief": { "beschreibung": "Ein SVG-Filter liegt per CSS filter: url(#f) auf Text, Linien oder Bildern. Für Wabern: feTurbulence erzeugt Rauschen, feDisplacementMap verschiebt damit die Pixel. Für Gooey: Weichzeichnen und danach das Alpha hart schneiden, so verschmelzen Formen. Beim Hover animiert JS (z. B. GSAP) Filterattribute wie scale, baseFrequency oder die Unschärfe. Am Ende geht der Wert auf 0 zurück und der Filter wird entfernt.", "warum_es_wirkt": "Organische Bewegung ohne WebGL, als würde Stoff oder Wasser kurz in Bewegung geraten. Text bleibt echter, auswählbarer Text. Als einzelner Akzent wirkt der Effekt handgemacht und poetisch.", "wann_einsetzen": "Dekorative Links, Menüs, Wortmarken, kleine Vorschaubilder. Mode, Kunst, Kultur, Musik. Gooey-Morph für den Wechsel zwischen zwei Wörtern.", "wann_nicht": "Auf großen Flächen und viel Fließtext: Filter sind CPU-lastig, besonders in Safari. Wenn ohnehin WebGL läuft, gehört die Verzerrung in den Shader. Nicht bei sachlichen Marken und nicht auf Werkfotos, die der Kunde verkauft.", "varianten": [ "Wabernde Link-Linien und Menüpunkte", "Wabernder Text: Konturen verflüssigen sich beim Hover oder Scrollen", "Bild-Verzerrung bei Vorschaubildern", "Gooey-Text: Buchstaben verschmelzen", "Gooey-Morph zwischen zwei Wörtern", "Fadenkreuz-Cursor mit Verzerrung", "Turbulenz-Verzerrung beim Scrollen" ], "umsetzung": ". Hover: el.style.filter = 'url(#d)'; gsap.timeline({ onComplete: () => el.style.filter = '' }).to('#d feDisplacementMap', { attr: { scale: 40 }, duration: .45, ease: 'power2.inOut' }).to('#d feDisplacementMap', { attr: { scale: 0 }, duration: .75, ease: 'power2.inOut' }).\n\nGooey-Morph: zwei Wörter im selben Grid-Feld; je Wort CSS blur(8 / anteil − 8 px) und opacity anteil^0,4; der Container bekommt feColorMatrix mit values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 255 -140\". Klassisches Gooey mit feGaussianBlur stdDeviation 8 und Alpha-Zeile 0 0 0 20 −8 eignet sich eher für Flächen und dicke Formen.\n\nFallstricke: Filterregion (x, y, width, height) großzügig setzen, sonst wird beschnitten. Jedes Element braucht eine eigene Filter-Instanz, wenn mehrere gleichzeitig laufen. Das SVG mit den Filtern nicht per display: none verstecken, sonst greifen die Filter nicht. Safari rendert SVG-Filter auf HTML langsamer und schneidet teils ab.", "mobil": "Weglassen. Höchstens auf einem einzelnen Wort, ohne Hover-Auslöser.", "reduzierte_bewegung": "Kein Filter. Statt Verzerrung eine kurze Überblendung per Opacity.", "barrierefreiheit": "Text bleibt echter Text. Im verzerrten Zustand nie Inhalt vermitteln, der Endzustand ist immer scharf. Bei Gooey-Wortwechseln das Wortpaar per aria-label vorlesen lassen." }, "messwerte": { "easing": "power2.inOut", "dauer_ms": "600–1200", "stagger_ms": "", "distanz": "displacement scale 0–60", "sonstiges": "", "herkunft": "typisch", "quelle": "", "aus_eintrag": [ "svg-filter-text-distortion" ] }, "kurve": { "bezier": [ 0.65, 0, 0.35, 1 ], "css": "cubic-bezier(0.65, 0, 0.35, 1)", "name": "power2.inOut", "dauer_ms": 450 }, "gesehen_bei": [ { "seite": "Codrops DistortedLinkEffects (Repo)", "url": "https://github.com/codrops/DistortedLinkEffects", "auszeichnung": "", "beobachtung": "Dekorative Link-Verzerrungen mit SVG-Filtern (2020).", "art": "demo" }, { "seite": "Codrops GooeyTextHoverEffect (Repo)", "url": "https://github.com/codrops/GooeyTextHoverEffect", "auszeichnung": "", "beobachtung": "Gooey-Text-Hover mit SVG-Filtern (2024).", "art": "demo" }, { "seite": "Codrops CrosshairDistortion (Repo)", "url": "https://github.com/codrops/CrosshairDistortion", "auszeichnung": "", "beobachtung": "Vollbild-SVG-Fadenkreuz-Cursor mit Distortion-Hover.", "art": "demo" }, { "seite": "Olivier Larose – Text Gooey", "url": "https://blog.olivierlarose.com/tutorials/text-gooey", "auszeichnung": "", "beobachtung": "Tutorial zum Gooey-Text (Titel gesehen).", "art": "artikel" } ], "tutorials": [ { "titel": "Codrops ThumbHoverSVGFilter (Repo)", "url": "https://github.com/codrops/ThumbHoverSVGFilter" }, { "titel": "Text Gooey (Olivier Larose)", "url": "https://blog.olivierlarose.com/tutorials/text-gooey" }, { "titel": "Codrops Tag ‚scroll‘", "url": "https://tympanus.net/codrops/tag/scroll/" } ], "kombinierbar_mit": [ "webgl-bildverzerrung", "unterstreichung-varianten", "blur-reveal", "rotating-words" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/hover/svg-filter-verzerrung/", "meta": "https://cecodesign.de/lab/fundus/hover/svg-filter-verzerrung/meta.json", "demo": "https://cecodesign.de/lab/fundus/hover/svg-filter-verzerrung/demo" }, "herkunft": { "quelldateien": [ "hover.json", "schriftanimation.json" ], "zusammengelegt_aus": [ "svg-filter-hover", "svg-filter-text-distortion" ], "trendstatus_begruendung": "Konflikt abklingend (hover) vs. etabliert (schriftanimation). Aufgelöst zu 'abklingend': feTurbulence-/Gooey-Effekte hatten ihren Höhepunkt um 2016–2019; die Belege sind überwiegend ältere Codrops-Demos bzw. eine Tag-Übersicht, aktuelle Award-Seiten lösen organische Verzerrung meist im Shader.", "querverweis_kategorien": [ "Schrift-Animationen" ] }, "bau": { "status": "fertig", "kurz": "Kategorienwörter und Stoffbilder wabern beim Hover kurz per feTurbulence und feDisplacementMap, die Kampagnenzeile verschmilzt per Gooey-Filter von Herbst zu Winter; am Ende ist alles wieder scharf.", "demo": true, "abhaengigkeiten": [ "gsap@3.15.0" ], "werte": { "easing": "power2.inOut = cubic-bezier(0.65, 0, 0.35, 1) für alle Filter-Tweens", "dauer_ms": "Turbulenz: 450 hinein (scale 0 → Stärke) + 750 zurück (→ 0), gesamt 1200; Gooey-Morph 1200", "staerke": "feDisplacementMap scale: Pult 20 / 40 / 60, Standard 40; Bilder × 1, Text × 0,8", "turbulenz_text": "feTurbulence fractalNoise, numOctaves 1, baseFrequency 0.012 0.09 → 0.0192 0.0405 während des Tweens; Filterregion x −8 %, y −30 %, Breite 116 %, Höhe 160 %", "turbulenz_bild": "feTurbulence fractalNoise, numOctaves 1, baseFrequency 0.006 0.018 → 0.0096 0.0081; Filterregion ±5 %", "gooey": "Je Wort CSS blur(8 / anteil − 8 px, max. 60 px) und opacity anteil^0,4; Container-Filter feColorMatrix Alpha 255 −140", "filter_an_aus": "filter: url(#…) nur während des Tweens, danach entfernt (keine Dauerkosten)", "ui": "Größen-Leiste und Zähler 200–300 ms cubic-bezier(0.25, 1, 0.5, 1) (Rezept)" }, "ausloeser": "hover", "touch": "Keine Verzerrung (Steckbrief: mobil weglassen). Größen-Leiste auf den Produktbildern ist immer sichtbar, Neuheiten als waagerechte Scroll-Snap-Reihe. Tippen auf die Kampagnenzeile wechselt Herbst und Winter ohne Filter.", "reduziert": "Kein Filter. Die Kampagnenzeile blendet in 300 ms per Opacity von Herbst zu Winter, Kategorien bekommen eine Unterstreichung, Produktbilder werden leicht transparent.", "korrekturen": { "name": "SVG-Filter-Verzerrung (Turbulenz und Gooey) für Bild und Text", "beschreibung": "Ein SVG-Filter liegt per CSS filter: url(#f) auf Text, Linien oder Bildern. Für Wabern: feTurbulence erzeugt Rauschen, feDisplacementMap verschiebt damit die Pixel. Für Gooey: Weichzeichnen und danach das Alpha hart schneiden, so verschmelzen Formen. Beim Hover animiert JS (z. B. GSAP) Filterattribute wie scale, baseFrequency oder die Unschärfe. Am Ende geht der Wert auf 0 zurück und der Filter wird entfernt.", "warum_es_wirkt": "Organische Bewegung ohne WebGL, als würde Stoff oder Wasser kurz in Bewegung geraten. Text bleibt echter, auswählbarer Text. Als einzelner Akzent wirkt der Effekt handgemacht und poetisch.", "wann_einsetzen": "Dekorative Links, Menüs, Wortmarken, kleine Vorschaubilder. Mode, Kunst, Kultur, Musik. Gooey-Morph für den Wechsel zwischen zwei Wörtern.", "wann_nicht": "Auf großen Flächen und viel Fließtext: Filter sind CPU-lastig, besonders in Safari. Wenn ohnehin WebGL läuft, gehört die Verzerrung in den Shader. Nicht bei sachlichen Marken und nicht auf Werkfotos, die der Kunde verkauft.", "varianten": [ "Wabernde Link-Linien und Menüpunkte", "Wabernder Text: Konturen verflüssigen sich beim Hover oder Scrollen", "Bild-Verzerrung bei Vorschaubildern", "Gooey-Text: Buchstaben verschmelzen", "Gooey-Morph zwischen zwei Wörtern", "Fadenkreuz-Cursor mit Verzerrung", "Turbulenz-Verzerrung beim Scrollen" ], "umsetzung": ". Hover: el.style.filter = 'url(#d)'; gsap.timeline({ onComplete: () => el.style.filter = '' }).to('#d feDisplacementMap', { attr: { scale: 40 }, duration: .45, ease: 'power2.inOut' }).to('#d feDisplacementMap', { attr: { scale: 0 }, duration: .75, ease: 'power2.inOut' }).\n\nGooey-Morph: zwei Wörter im selben Grid-Feld; je Wort CSS blur(8 / anteil − 8 px) und opacity anteil^0,4; der Container bekommt feColorMatrix mit values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 255 -140\". Klassisches Gooey mit feGaussianBlur stdDeviation 8 und Alpha-Zeile 0 0 0 20 −8 eignet sich eher für Flächen und dicke Formen.\n\nFallstricke: Filterregion (x, y, width, height) großzügig setzen, sonst wird beschnitten. Jedes Element braucht eine eigene Filter-Instanz, wenn mehrere gleichzeitig laufen. Das SVG mit den Filtern nicht per display: none verstecken, sonst greifen die Filter nicht. Safari rendert SVG-Filter auf HTML langsamer und schneidet teils ab.", "mobil": "Weglassen. Höchstens auf einem einzelnen Wort, ohne Hover-Auslöser.", "reduzierte_bewegung": "Kein Filter. Statt Verzerrung eine kurze Überblendung per Opacity.", "barrierefreiheit": "Text bleibt echter Text. Im verzerrten Zustand nie Inhalt vermitteln, der Endzustand ist immer scharf. Bei Gooey-Wortwechseln das Wortpaar per aria-label vorlesen lassen." }, "geprueft": "01.11.2026", "notiz": "Welt: Rezept mode-beauty-kollektion, erfundenes Modelabel Venneker aus Düsseldorf, Kampagne „Rheinnebel“ Herbst/Winter 2026 (Zalando Sans wdth 125, Fragment Mono, Off-White #f6f3ee). Alle Bilder sind eigene SVG-Stofftexturen (Plissee, Walkloden, Grobstrick), einmal als gerastert. Drei Varianten zugleich: Kategorien wabern (Text), Neuheiten-Stoffe wehen (Bild), Kampagnenzeile Herbst → Winter (Gooey-Morph). Pult schaltet die Stärke 20/40/60. Referenzen: entirestudios.com, therow.com, isseymiyake.com, ssense.com. AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: --meta #8c857b → #736d64 (4,6:1), .seite min-width 0 und Kategorie-Wörter overflow-wrap anywhere (kein Querscrollen bei Textabständen), Kopfzeile unter 360 px mit 8 px Lücke (320 px ohne Querscrollen), Kontrastmodus-Rahmen für Knöpfe." } }