{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "svg-pfad-zeichnen-scroll",
 "name": "SVG-Pfad zeichnet sich beim Scrollen",
 "name_en": "Scroll-drawn SVG path / line drawing",
 "kurz": "Eine Straße zeichnet sich beim Scrollen durch fünf Etappen zum Führerschein, Wegschilder federn, sobald sie erreicht sind.",
 "kategorie": "Scroll & Section-Animationen",
 "kategorie_slug": "scroll",
 "kategorie_nr": 5,
 "bau_chat": "C2",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "handgemacht",
  "verspielt",
  "warm"
 ],
 "technik": [
  "svg",
  "css",
  "scroll-driven-css",
  "gsap"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine geschwungene Linie läuft über mehrere Abschnitte, etwa als Leitlinie, Route oder Signatur. Ihre sichtbare Länge folgt dem Scroll: stroke-dasharray entspricht der Gesamtlänge, stroke-dashoffset läuft von der Länge auf 0. Optional fährt ein Objekt oder Text am Pfad mit.",
  "warum_es_wirkt": "Die Linie verbindet Abschnitte grafisch, macht den Fortschritt sichtbar und wirkt handgemacht.",
  "wann_einsetzen": "Prozess- und Timeline-Seiten, verspielte Marken, Signatur-Animationen.",
  "wann_nicht": "In nüchternen, datenorientierten Layouts und wenn die Linie Inhalte kreuzt.",
  "varianten": [
   "stroke-dashoffset an den Scroll gekoppelt",
   "Text entlang des Pfads (textPath, startOffset)",
   "Objekt entlang des Pfads (offset-path mit offset-distance oder getPointAtLength)",
   "Canvas-Variante",
   "Handlinie mit Ankern (Variante anker): Die Linie wird aus den Positionen echter Elemente errechnet (unterstreicht eine Headline, umkreist Zahlen und Preis, endet mit Pfeil am Knopf), mit Rauheit und Begleitstrich wie von Hand."
  ],
  "umsetzung": "Am Pfad pathLength=\"1\" setzen, dann gilt stroke-dasharray: 1 und stroke-dashoffset von 1 auf 0, ohne getTotalLength. Nur CSS: animation: draw linear both; animation-timeline: view(); animation-range: entry 20% exit 60% mit @keyframes draw { to { stroke-dashoffset: 0 } }. Hat die Linie selbst ein Strichmuster (Mittellinie), zeichnet man stattdessen eine Maske mit diesem Trick. Soll die Spitze genau einer Höhe im Viewport folgen, den Pfad einmal abtasten und den Fortschritt per y-Wert suchen. Mitfahrendes Objekt: offset-path: path(…) mit offset-distance 0 % bis 100 % oder getPointAtLength.",
  "mobil": "Für Hochformat einen eigenen Pfad zeichnen, preserveAspectRatio beachten. Am robustesten: Pfad aus den echten Positionen der Inhalte bauen.",
  "reduzierte_bewegung": "Linie vollständig gezeichnet zeigen.",
  "barrierefreiheit": "Dekorative Linie mit aria-hidden ausblenden. Alle Informationen müssen im Text stehen, die Linie ergänzt nur."
 },
 "messwerte": {
  "easing": "linear",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "pathLength='1'-Trick",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Olivier Larose – SVG Path On Scroll / Text Along Path",
   "url": "https://blog.olivierlarose.com/tutorials/svg-path-on-scroll",
   "auszeichnung": "",
   "beobachtung": "Tutorial (Inhalt gesperrt; laut Beschreibung Canvas-Umsetzung in Next.js).",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Olivier Larose – SVG Path On Scroll",
   "url": "https://blog.olivierlarose.com/tutorials/svg-path-on-scroll"
  },
  {
   "titel": "Olivier Larose – Text Along Path",
   "url": "https://blog.olivierlarose.com/tutorials/text-along-path"
  }
 ],
 "kombinierbar_mit": [
  "scroll-fortschritt",
  "pinned-scrub-scrollytelling"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/scroll/svg-pfad-zeichnen-scroll/",
  "meta": "https://cecodesign.de/lab/fundus/scroll/svg-pfad-zeichnen-scroll/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/scroll/svg-pfad-zeichnen-scroll/demo"
 },
 "herkunft": {
  "quelldateien": [
   "scroll.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Kein Produktionsbeleg gefunden; bleibt C."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Straße zeichnet sich beim Scrollen durch fünf Etappen zum Führerschein, Wegschilder federn, sobald sie erreicht sind.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "linear (Zeichnen direkt an die Scrollposition gekoppelt, ohne Glättung)",
   "pathLength": "Maskenpfad mit pathLength=\"1\", stroke-dasharray \"1 1\", stroke-dashoffset = 1 − Fortschritt",
   "spitze": "Straßenspitze folgt 70 % der Viewport-Höhe; Länge per Abtastung des Pfads alle ca. 6 px (mindestens 200 Proben) und Binärsuche nach y",
   "strasse_desktop": "Belag 34 px #142B50, Rand 46 px #EEF0D8, Mittellinie 3 px #F8F8EC mit Strichen 14/16, Maske 60 px",
   "strasse_telefon": "Belag 18 px, Rand 26 px, Mittellinie 2 px mit Strichen 8/10, Maske 34 px; eigener Pfad am linken Rand mit 18–22 px Ausschwung",
   "routenvorschau": "gepunktete Linie 2 px, #142B50 mit 18 % Deckkraft, Striche 2/9",
   "pfadform": "senkrecht durch jede Etappe, dazwischen kubische S-Kurve mit senkrechten Tangenten (Kontrollpunkte auf halber Höhe des Abstands); Pfad wird aus den echten Positionen der Schilder gebaut und bei resize neu berechnet",
   "schild": "scale 0.78 → 1 in 400 ms cubic-bezier(0.34, 1.56, 0.64, 1), Fläche #FFD60A in 200 ms cubic-bezier(0.4, 0, 0.2, 1)",
   "auto": "getPointAtLength an der Spitze, Winkel aus Punkt + 2 px, unter 760 px auf 0.6 skaliert",
   "text_am_pfad": "textPath startOffset = Spitze − Textlänge − 36 px, 12,5 px Atkinson Hyperlegible Next 700, Laufweite 0.14em, #FFD60A",
   "knopf": "transform und box-shadow 350 ms cubic-bezier(0.34, 1.56, 0.64, 1), translateY −2 px",
   "vorfuehrung": "Selbst-Scroll über die ganze Seite in 12 s (Kosinus), dann zurück nach oben"
  },
  "ausloeser": "scroll",
  "touch": "Gleiche Kopplung an den nativen Scroll. Unter 760 px ein eigener Hochformat-Pfad am linken Rand mit kleineren Schildern, Deko-Illustrationen entfallen, unten feste Leiste Anmelden, Anrufen, WhatsApp. Kein Hover nötig.",
  "reduziert": "Straße liegt vollständig gezeichnet da, alle Schilder sind erreicht, ohne Federn. Das Auto entfällt, der Text am Pfad steht still am Ende.",
  "korrekturen": {
   "beschreibung": "Eine geschwungene Linie läuft über mehrere Abschnitte, etwa als Leitlinie, Route oder Signatur. Ihre sichtbare Länge folgt dem Scroll: stroke-dasharray entspricht der Gesamtlänge, stroke-dashoffset läuft von der Länge auf 0. Optional fährt ein Objekt oder Text am Pfad mit.",
   "warum_es_wirkt": "Die Linie verbindet Abschnitte grafisch, macht den Fortschritt sichtbar und wirkt handgemacht.",
   "wann_einsetzen": "Prozess- und Timeline-Seiten, verspielte Marken, Signatur-Animationen.",
   "wann_nicht": "In nüchternen, datenorientierten Layouts und wenn die Linie Inhalte kreuzt.",
   "varianten": [
    "stroke-dashoffset an den Scroll gekoppelt",
    "Text entlang des Pfads (textPath, startOffset)",
    "Objekt entlang des Pfads (offset-path mit offset-distance oder getPointAtLength)",
    "Canvas-Variante",
    "Handlinie mit Ankern (Variante anker): Die Linie wird aus den Positionen echter Elemente errechnet (unterstreicht eine Headline, umkreist Zahlen und Preis, endet mit Pfeil am Knopf), mit Rauheit und Begleitstrich wie von Hand."
   ],
   "umsetzung": "Am Pfad pathLength=\"1\" setzen, dann gilt stroke-dasharray: 1 und stroke-dashoffset von 1 auf 0, ohne getTotalLength. Nur CSS: animation: draw linear both; animation-timeline: view(); animation-range: entry 20% exit 60% mit @keyframes draw { to { stroke-dashoffset: 0 } }. Hat die Linie selbst ein Strichmuster (Mittellinie), zeichnet man stattdessen eine Maske mit diesem Trick. Soll die Spitze genau einer Höhe im Viewport folgen, den Pfad einmal abtasten und den Fortschritt per y-Wert suchen. Mitfahrendes Objekt: offset-path: path(…) mit offset-distance 0 % bis 100 % oder getPointAtLength.",
   "mobil": "Für Hochformat einen eigenen Pfad zeichnen, preserveAspectRatio beachten. Am robustesten: Pfad aus den echten Positionen der Inhalte bauen.",
   "reduzierte_bewegung": "Linie vollständig gezeichnet zeigen.",
   "barrierefreiheit": "Dekorative Linie mit aria-hidden ausblenden. Alle Informationen müssen im Text stehen, die Linie ergänzt nur."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept fahrschule-freundlich-buchbar (Signatur-Muster dort), erfundene Fahrschule Fuldaschleife in Kassel-Wehlheiden. Bricolage Grotesque, Atkinson Hyperlegible Next, Creme, Navy, Kennzeichen-Gelb nur als Fläche. Die Straße startet unter der Klassenwahl-Karte und verbindet fünf Etappen (Anmelden, Sehtest und Erste Hilfe, Theorie, Praxis, Prüfung) bis zur Zielflagge, Federung nur auf Schildern und Knöpfen. Umschalter: Nur Linie, Mit Auto, Text am Pfad. Referenzen: tofudriving.com, coastlineacademy.com. AD-Review 01.11.2026: Note 4. Pult startet eingeklappt (data-fundus-pult=\"zu\"), weil es beim Scrollen Etappentexte verdeckt. Korrektur 02.11.2026: Variante anker (Prinzip Chalk Line, BUTTONS-SLIDERREV-RECHERCHE Q42; nichts übernommen): erfundener Sketchnote-Kurs Randskizze (Ines Wohlleben, Rinteln) im Rezept kurs-coaching-lernweg. Handlinie mit Rauheit und Begleitstrich wird aus den Positionen von acht echten Elementen gebaut (Headline unterstreichen, Kreise um „12 Grundformen“, vier Modulnummern, Porträt und Preis, Pfeil zum Knopf), Stempel am Ende. Umschalter Straße | Handlinie im Pult, ?v=anker; Darstellung (Linie/Auto/Text) nur in der Straße.",
  "varianten": [
   {
    "id": "strasse",
    "name": "Straße mit Etappen",
    "knopf": "Straße",
    "wann": "Fahrschule, Ablauf mit festen Etappen: eine breite Straße mit Schildern führt durch die Schritte, optional mit Auto oder Text am Pfad.",
    "werte": {
     "pfad": "Straße durch die Schilder, senkrecht durch jede Etappe, S-Kurven dazwischen",
     "rezept": "fahrschule-freundlich-buchbar"
    }
   },
   {
    "id": "anker",
    "name": "Handlinie verbindet Anker",
    "knopf": "Handlinie, Anker",
    "wann": "Kurs, Coaching, Workshop, Agentur mit Handschrift: eine gezeichnete Linie verbindet echte Elemente einer normalen Verkaufsseite (Headline, Ergebnis, Module, Person, Preis) und endet am Knopf. Nicht bei Kanzlei, Praxis, Luxus.",
    "werte": {
     "rezept": "kurs-coaching-lernweg: Grund #F4F6FA, Tinte #141414, Marke #3A50C8 (Linie, Knopf, 6,6:1 mit Weiß), Erfolg #10BF7A mit Schrift #0B3D2A (5,1:1); Bricolage Grotesque, Onest, Shantell Sans für Randnotizen und Modul-Labels",
     "anker": "Elemente mit data-anker: strich (Unterstreichung, Bézier mit 12 px Welle, 8 px vor bis 12 px nach dem Wort), kreis (Schlaufe 1,12 Umdrehungen, Radius wächst um 7 %, 16 px Abstand, Telefon 10 px; beginnt auf der Seite, von der die Linie kommt), pfeil (endet 16 px vor dem Knopf, Telefon 12 px darüber; Pfeilspitze 15 px, ±0,5 rad)",
     "uebergang": "kubische Bézier: Kontrollpunkt 1 senkrecht 62 % tiefer, Kontrollpunkt 2 30 % über dem Ziel, Schwung 30 px vom Ziel weg oder data-aus × Breite; Telefon: Spur 6 px vom linken Rand mit 70 px Ein- und Ausfahrt",
     "rauheit": "Versatz quer zur Laufrichtung: Hauptstrich 1,6 px, Begleitstrich 2,4 px; 0,6·sin(s·0,031) + 0,3·sin(s·0,083) + 0,1·sin(s·0,21), fester Seed; Punktabstand 4 px",
     "strich": "Hauptstrich 3,2 px, Begleitstrich 1,4 px mit 45 % Deckkraft, stroke-linecap round; pathLength = Länge der glatten Linie, dashoffset = Länge − Fortschritt",
     "kopplung": "linear; Spitze folgt 70 % der Viewport-Höhe; jeder Abschnitt hat ein eigenes Scroll-Fenster (Kreis: Oberkante bis Unterkante des Elements), damit Schlaufen nicht springen; am Seitenende ist die Linie fertig",
     "spitze": "Punkt r 4,5 px an der Spitze, am Ende ausgeblendet",
     "notizen": "Randnotizen in Shantell Sans 15 px, #2F45B8, rotate(-3deg), erscheinen bei halbem Anker in 300 ms cubic-bezier(0.16, 1, 0.3, 1); unter 760 px ausgeblendet",
     "stempel": "„Lernweg komplett“ am Ende: scale 0.4 → 1 in 500 ms cubic-bezier(0.34, 1.56, 0.64, 1), rotate(-6deg) (Feder nur im Erfolgsmoment, wie im Rezept)",
     "knopf": "Fläche und Rand 150 ms cubic-bezier(0.16, 1, 0.3, 1), :active translateY(1px), Höhe 48 px"
    }
   }
  ]
 }
}