{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "text-on-path", "name": "Text auf Pfad", "name_en": "Text along SVG path / circular text", "kurz": "Text fließt auf einer SVG-Kurve, gekoppelt an den Scroll: bricht das Raster und wirkt organisch, als Band, verformter Pfad oder Rund-Label.", "kategorie": "Schrift-Animationen", "kategorie_slug": "schrift-animationen", "kategorie_nr": 6, "bau_chat": "C1", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "website_belege": 1, "stimmung": [ "verspielt", "warm" ], "stimmung_roh": [ "verspielt", "organisch", "handwerklich" ], "technik": [ "svg", "vanilla-js", "scrolltrigger", "lenis" ], "technik_gruppen": [ "js", "gsap", "lenis", "canvas" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "1) Ein SVG- legt die Kurve fest: Welle, Schlaufe oder Kreis. 2) Der Text liegt per darauf. Für ein durchgehendes Band stehen gleiche Kopien hintereinander, im Abstand von 40 % der Pfadlänge. Im Vorbild sind es drei (startOffset −40 %, 0 %, 40 %), eine vierte bei 80 % schließt die Lücke am Pfadende. 3) Beim Scrollen wächst startOffset jeder Kopie um bis zu 40 %. Der Text fließt die Kurve entlang, linear an den Scroll-Fortschritt gekoppelt. 4) Statt den Text zu verschieben, kann sich auch der Pfad verformen. Der Text folgt ihm. 5) Auf einem Kreispfad entsteht ein Rund-Label.", "warum_es_wirkt": "Schrift auf einer Kurve bricht das starre Raster. Das wirkt organisch und handwerklich. Weil die Bewegung am Scrollen hängt, steuert der Besucher sie selbst; nichts läuft von allein. Rund-Labels sind ein kleiner, wiedererkennbarer Akzent.", "wann_einsetzen": "Sektionstrenner und Übergänge zum Footer, Schlagwort-Bänder (Leistungen, Schwerpunkte), Rund-Labels wie „Termin vereinbaren“ oder „Available for work“, Marken mit verspieltem oder handwerklichem Charakter.", "wann_nicht": "Für wichtige Inhalte: Text auf Kurven liest sich schwer. Kein langer Text auf engen Kurven. Kein Band, das von allein endlos läuft, neben Inhalten, die Ruhe brauchen.", "varianten": [ "Scroll-gekoppelter startOffset: Kopien fließen die Kurve entlang (Olivier Larose)", "Pfad morpht, Text folgt: die Kurve verformt sich mit dem Scroll, der Text bleibt mittig darauf", "Kreis: Rund-Label, dessen Text sich mit dem Scroll weiterdreht (als Komponente eigener Eintrag kreistext-siegel-rotierend)", "Radiales Marquee (Osmo „Radial Text Marquee“)", "Statisch auf einem Kreisbogen, Teil für Teil erklärt: z. B. die Reifengröße auf der Reifenflanke (Demo-Variante reifen)" ], "umsetzung": "……. Scroll-Fortschritt p (0–1) → tp.setAttribute('startOffset', (-40 + i*40 + p*40) + '%'). Die Schrift skaliert mit der viewBox: viewBox auf die echte Pixelgröße setzen und den Pfad in JS berechnen, dann bleibt die Schriftgröße in px planbar. Text am Pfadende wird abgeschnitten: Pfad über den Rand hinaus zeichnen und Kopien nutzen. textLength = 40 % der Pfadlänge (lengthAdjust=\"spacing\") ergibt ein nahtloses Band. Einen Kreispfad zweimal umlaufen lassen, damit verschobener Text nicht abreißt. SVG kürzt Leerzeichen am Textende, deshalb dort ein geschütztes Leerzeichen setzen. Das Vorbild glättet das Scrollen mit Lenis; ohne Lenis reicht ein Lerp auf p.", "mobil": "Funktioniert mit Touch-Scroll. Kurven werden auf schmalen Viewports gestaucht: Schrift größer wählen, weniger Wellen und kürzere Sätze.", "reduzierte_bewegung": "Text steht still auf dem Pfad, ohne Scroll-Kopplung. Ein verformter Pfad zeigt gleich seine Endform, ein Rund-Label dreht sich nicht.", "barrierefreiheit": "Das SVG ist dekorativ (aria-hidden), damit auch alle Kopien. Der Inhalt steht einmal als normaler Text im Dokument, notfalls visuell versteckt. Ein Rund-Label, das als Bild wirkt, bekommt role=\"img\" und ein aria-label. Kontrast von Text zu Band mindestens 4,5:1." }, "messwerte": { "easing": "linear (scrollgebunden), Lenis-Glättung", "dauer_ms": "scrollgebunden; Kreis-Badge typ. 10–20 s pro Umdrehung", "stagger_ms": "", "distanz": "startOffset-Verschiebung 40 %", "sonstiges": "3 Kopien mit 40 % Abstand", "herkunft": "beobachtet", "quelle": "https://blog.olivierlarose.com/tutorials/text-along-path" }, "kurve": { "bezier": [ 0.2, 0.0, 0.38, 0.9 ], "css": "cubic-bezier(0.2, 0, 0.38, 0.9)", "name": "eigene Kurve", "dauer_ms": 300 }, "gesehen_bei": [ { "seite": "Olivier Larose – Text Along Path", "url": "https://blog.olivierlarose.com/tutorials/text-along-path", "auszeichnung": "", "beobachtung": "Drei textPath-Kopien mit 40 % Abstand, startOffset = −40 + i*40 + p*40 %, Sticky-Footer liefert Scrollraum, Lenis für weiches Scrollen.", "art": "artikel" }, { "seite": "Osmo – Radial Text Marquee", "url": "https://www.osmo.supply/resource/radial-text-marquee", "auszeichnung": "", "beobachtung": "Als Ressource gelistet (nur Titel gesehen).", "art": "demo" }, { "seite": "Build in Amsterdam", "url": "https://buildinamsterdam.com/", "auszeichnung": "", "beobachtung": "Menü-Button: SVG Menu auf Kreispfad (rundes Text-Badge).", "art": "website" } ], "tutorials": [ { "titel": "Text Along Path (Olivier Larose)", "url": "https://blog.olivierlarose.com/tutorials/text-along-path" } ], "kombinierbar_mit": [ "marquee-laufband", "magnetische-elemente" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/text-on-path/", "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/text-on-path/meta.json", "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/text-on-path/demo" }, "herkunft": { "quelldateien": [ "schriftanimation.json", "patch-belege-1.json", "patch-luecken-b.json" ], "pruefnotizen": [ "patch-belege-1.json: 1 Produktionsbeleg (Kreis-Badge-Variante).", "patch-luecken-b.json: Variante ‚Rotierendes Kreis-Badge‘ hat jetzt den eigenen Eintrag kreistext-siegel-rotierend (Badge/Siegel als Komponente); hier auf Pfad-Text mit Scroll-Offset fokussieren und gegenseitig in kombinierbar_mit verlinken." ] }, "bau": { "status": "fertig", "kurz": "Text fließt auf einer SVG-Kurve, gekoppelt an den Scroll: bricht das Raster und wirkt organisch, als Band, verformter Pfad oder Rund-Label.", "demo": true, "abhaengigkeiten": [], "werte": { "easing": "linear (scrollgebunden); Fortschritt p je Frame mit Lerp 0,1 geglättet; UI cubic-bezier(0.2, 0, 0.38, 0.9)", "dauer_ms": "scrollgebunden: Strecke 300vh (200vh Scrollweg) = p 0 → 1; UI 150, Variantenwechsel 250, Texteinblendung 400 (8 px Weg)", "distanz": "startOffset +40 % der Pfadlänge über die ganze Strecke", "formel": "startOffset = −40 + i·40 + p·40 %", "kopien": "4 gleiche Kopien bei −40 / 0 / 40 / 80 %, je textLength = 40 % der Pfadlänge, lengthAdjust spacing (nahtloses Band)", "pfad_welle": "Halbsinus als kubische Bézierkurve (k = 4A/3, Griffe bei 36 % der Halbwelle); x von −15 % bis 115 % der Breite; 4 Halbwellen (Telefon 3); A = min(H·0,13; 112 px), Telefon min(H·0,1; 72 px), begrenzt auf die freie Fläche unter dem Text", "schrift_band": "Google Sans Flex 460, Startgröße clamp(24 px; 2,6vw; 40 px), Telefon 21 px, auf die Kopienlänge angeglichen (Faktor ≥ 0,95), Laufweite 0,01em; Bandbreite = Schrift × 2,15; Trennpunkte #FFC776", "zierlinien": "je Seite 3 parallele Wellen im Abstand 13 px (Telefon 9 px), 1 px, Deckkraft 0,155 / 0,11 / 0,065", "morph": "S-Kurve, Krümmung c = 1 − 0,88·p (100 % → 12 %), Scheitel 0,2887·D; Text startOffset 50 %, text-anchor middle", "kreis": "Kreispfad läuft zweimal um; Ringtext versal, 520, Laufweite 0,14em, textLength = Umfang; startOffset = (p·0,4 mod 1)·Umfang; Ringbreite = Schrift × 2,6", "farben": "Band #005450 mit Text #F5F7F7; Ring #E2E0DE mit Text #00403c; Grund #F5F7F7", "vorfuehrung": "Welle 7 s (p 0 → 1,4), Pfad morpht 6 s (p 0 → 1 in 4,2 s, dann halten), Kreis 7 s (p 0 → 2,5), in Schleife" }, "ausloeser": "scroll", "touch": "Gleiches Verhalten über Touch-Scroll, die Bühne klebt (sticky, 100svh). Pfad, Amplitude und Schrift werden für schmale Viewports neu berechnet (3 Halbwellen, Band ab 21 px). Umschalter 36 px hoch. Variante reifen: Tippen auf einen Teil der Größe (Bogen oder Liste) hält ihn fest und erklärt ihn in der Nabe; Listenknöpfe 48 px hoch.", "reduziert": "Keine Scrollstrecke, keine Kopplung: die Welle steht bei p = 0,5, der Pfad zeigt die aufgerichtete Endform (12 %), der Ring steht still. Variantenwechsel ohne Überblendung. Variante reifen: steht ohnehin still, Hervorheben ohne Übergang.", "korrekturen": { "beschreibung": "1) Ein SVG- legt die Kurve fest: Welle, Schlaufe oder Kreis. 2) Der Text liegt per darauf. Für ein durchgehendes Band stehen gleiche Kopien hintereinander, im Abstand von 40 % der Pfadlänge. Im Vorbild sind es drei (startOffset −40 %, 0 %, 40 %), eine vierte bei 80 % schließt die Lücke am Pfadende. 3) Beim Scrollen wächst startOffset jeder Kopie um bis zu 40 %. Der Text fließt die Kurve entlang, linear an den Scroll-Fortschritt gekoppelt. 4) Statt den Text zu verschieben, kann sich auch der Pfad verformen. Der Text folgt ihm. 5) Auf einem Kreispfad entsteht ein Rund-Label.", "warum_es_wirkt": "Schrift auf einer Kurve bricht das starre Raster. Das wirkt organisch und handwerklich. Weil die Bewegung am Scrollen hängt, steuert der Besucher sie selbst; nichts läuft von allein. Rund-Labels sind ein kleiner, wiedererkennbarer Akzent.", "wann_einsetzen": "Sektionstrenner und Übergänge zum Footer, Schlagwort-Bänder (Leistungen, Schwerpunkte), Rund-Labels wie „Termin vereinbaren“ oder „Available for work“, Marken mit verspieltem oder handwerklichem Charakter.", "wann_nicht": "Für wichtige Inhalte: Text auf Kurven liest sich schwer. Kein langer Text auf engen Kurven. Kein Band, das von allein endlos läuft, neben Inhalten, die Ruhe brauchen.", "varianten": [ "Scroll-gekoppelter startOffset: Kopien fließen die Kurve entlang (Olivier Larose)", "Pfad morpht, Text folgt: die Kurve verformt sich mit dem Scroll, der Text bleibt mittig darauf", "Kreis: Rund-Label, dessen Text sich mit dem Scroll weiterdreht (als Komponente eigener Eintrag kreistext-siegel-rotierend)", "Radiales Marquee (Osmo „Radial Text Marquee“)", "Statisch auf einem Kreisbogen, Teil für Teil erklärt: z. B. die Reifengröße auf der Reifenflanke (Demo-Variante reifen)" ], "umsetzung": "……. Scroll-Fortschritt p (0–1) → tp.setAttribute('startOffset', (-40 + i*40 + p*40) + '%'). Die Schrift skaliert mit der viewBox: viewBox auf die echte Pixelgröße setzen und den Pfad in JS berechnen, dann bleibt die Schriftgröße in px planbar. Text am Pfadende wird abgeschnitten: Pfad über den Rand hinaus zeichnen und Kopien nutzen. textLength = 40 % der Pfadlänge (lengthAdjust=\"spacing\") ergibt ein nahtloses Band. Einen Kreispfad zweimal umlaufen lassen, damit verschobener Text nicht abreißt. SVG kürzt Leerzeichen am Textende, deshalb dort ein geschütztes Leerzeichen setzen. Das Vorbild glättet das Scrollen mit Lenis; ohne Lenis reicht ein Lerp auf p.", "mobil": "Funktioniert mit Touch-Scroll. Kurven werden auf schmalen Viewports gestaucht: Schrift größer wählen, weniger Wellen und kürzere Sätze.", "reduzierte_bewegung": "Text steht still auf dem Pfad, ohne Scroll-Kopplung. Ein verformter Pfad zeigt gleich seine Endform, ein Rund-Label dreht sich nicht.", "barrierefreiheit": "Das SVG ist dekorativ (aria-hidden), damit auch alle Kopien. Der Inhalt steht einmal als normaler Text im Dokument, notfalls visuell versteckt. Ein Rund-Label, das als Bild wirkt, bekommt role=\"img\" und ein aria-label. Kontrast von Text zu Band mindestens 4,5:1." }, "geprueft": "02.11.2026", "notiz": "Welt: Rezept praxis-gesundheit-ruhig, erfundene Physiopraxis „Seegang“ in Kiel-Düsternbrook (Hedvig Letters Serif, Google Sans Flex, Petrol #005450, Apricot nur für Trennpunkte). Das Rezept verbietet automatisch bewegte Inhalte und Lenis, deshalb nur die scrollgekoppelte Fassung, geglättet per Lerp statt Lenis. Drei Varianten per Umschalter: Welle (Schwerpunkte auf einem Petrol-Band, 4 Kopien), Pfad morpht (liegende Wirbelsäule richtet sich in sechs Wochen auf), Kreis (Leistungen als Ring um den Termin-Knopf). Sticky-Bühne über 300vh; alle Pfade werden aus der echten Feldgröße und der freien Fläche unter dem Text berechnet (ResizeObserver). Vorführung simuliert p linear und spielt alle drei Varianten nacheinander. Prinzipien aus dem Bildfundus: Kieler-Woche-Plakat (Schriftbänder auf Wellen), Meander Valley (parallele Wellenlinien), Breakfast without Bees (Kreistext um Inhalt), HelloBetter (ruhiges Gesundheitsgrün). AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: Kreis-Inhalt (Termin-Link) ist außerhalb des Modus Kreis inert, weil er dort mit opacity 0 unsichtbar ist. Kontrastmodus: Knöpfe mit Rahmen ButtonText. Varianten 02.11.2026: Regel 13 (?v=basis|reifen, Gruppe „Variante“ in der Leiste schreibt die URL). basis unverändert. reifen für das Rezept kfz-werkstatt-autohaus (erfundenes Autohaus Rehberg, Hennef): gezeichneter Reifen ohne Marke mit Felge und Bremsscheibe, die Größe 205/55 R16 91V und das DOT-Datum stehen still auf dem Kreisbogen. Liste daneben erklärt jeden Teil; Zeigen oder Fokus hebt den Teil auf dem Bogen gelb hervor, die Nabe nennt die Bedeutung. Darunter Festpreise Reifenservice mit Stand-Datum.", "varianten": [ { "id": "basis", "name": "Scroll-Band: Welle, Pfad morpht, Kreis", "knopf": "Scroll-Band", "wann": "Sektionstrenner, Schlagwort-Bänder und Rund-Labels, deren Text beim Scrollen fließt: Praxis, Studio, Marken mit handwerklichem Charakter.", "werte": { "kopplung": "startOffset = −40 + i·40 + p·40 %, Strecke 300vh, Lerp 0,1", "kopien": "4 × 40 % der Pfadlänge, textLength, lengthAdjust spacing", "schrift": "Google Sans Flex 460, Hedvig Letters Serif", "rezept": "praxis-gesundheit-ruhig" } }, { "id": "reifen", "name": "Reifenflanke: Größe auf dem Bogen, Teil für Teil erklärt", "knopf": "Reifen", "wann": "Werkstatt, Reifenhandel, Autohaus: die Reifengröße steht still auf der Flanke und wird beim Zeigen oder per Tastatur erklärt. Überall, wo Text auf einem Rund eine Bedeutung hat (Messgerät, Uhr, Siegel mit Angaben) statt als Deko zu laufen.", "werte": { "pfad": "Kreisbogen r 312 in viewBox 800 × 800 (Mitte der Flanke zwischen r 262 und 368), von 9 Uhr über oben nach 3 Uhr; unten r 300 mit sweep 0, damit die Schrift aufrecht steht", "textpath": "startOffset 50 %, text-anchor middle, dy 0.35em", "schrift_bogen": "Mona Sans 800, font-stretch 80 %, 64 Einheiten von 800 (8 % der Reifenbreite), Laufweite 1.5; untere Zeile 22, 700, Laufweite 3", "teile": "jeder Teil ein tspan mit data-teil: 205 Breite, 55 Querschnitt, R Bauart, 16 Felgendurchmesser, 91 Lastindex (615 kg), V Geschwindigkeitsindex (240 km/h), DOT 2423 (KW 24/2023)", "hervorheben": "gewählter Teil #F5B700, übrige von #C9CDD2 auf #6B7077; Nabe (34 % der Breite, Asphalt #232629) zeigt Wert, Name und Bedeutung; Farbe 120 ms cubic-bezier(0.16, 1, 0.3, 1)", "ausloeser": "Hover und Fokus auf der Liste oder auf dem Bogen; Klick oder Tippen hält den Teil fest (aria-pressed)", "bewegung": "keine: kein Scroll, keine Drehung", "barrierefreiheit": "SVG aria-hidden; die Liste mit sieben Knöpfen (48 px) ist die einzige Textfassung", "reduziert": "Hervorheben ohne Übergang", "vorfuehrung": "sieben Teile je 1100 ms, dann 1400 ms ohne Auswahl, in Schleife", "rezept": "kfz-werkstatt-autohaus: Mona Sans h1 800, wdth 80, clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); Google Sans Flex 17 px; Grund #F2F1ED, Text #121314, Sekundär #595E63, Asphalt #232629, Verkehrsgelb #F5B700 nur für Termin buchen und die Auswahl" } } ] } }