Frise
<html lang="fr"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>LSF — Frise Chronologique Animée</title><link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"><style>*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }body { background: #f8f7f4; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 32px 16px 40px; gap: 24px;}.scroll { overflow-x: auto; max-width: 100%; }svg { font-family: 'EB Garamond', Georgia, serif; display: block; }button { font-family: 'EB Garamond', Georgia, serif; font-size: 15px; font-style: italic; background: none; border: 0.5px solid #999; border-radius: 24px; padding: 7px 24px; color: #666; cursor: pointer; letter-spacing: 0.3px; transition: border-color 0.2s, color 0.2s;}button:hover { border-color: #333; color: #111; }</style></head><body><div class="scroll"><svg id="svg" width="1060" height="580" viewBox="0 0 1060 580"><defs><marker id="ar" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse"><path d="M1 2L9 5L1 8" fill="none" stroke="context-stroke" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></marker></defs><!-- TITRE --><g id="g-title"><text x="585" y="17" font-size="13" font-weight="700" fill="#111" text-anchor="middle">Influences intellectuelles sur la Linguistique Systémique Fonctionnelle</text><text x="585" y="30" font-size="9" font-style="italic" fill="#888" text-anchor="middle">Figures clés et publications · D'après les travaux de recherche publiés</text></g><!-- BANDES (opacités finales gérées par attributs SVG) --><g id="g-bands"><rect x="120" y="42" width="930" height="46" fill="#FEF3DC" opacity="0.7" rx="2"/><rect x="120" y="120" width="930" height="46" fill="#EEEDFE" opacity="0.7" rx="2"/><rect x="120" y="198" width="930" height="46" fill="#D5F0E6" opacity="0.7" rx="2"/><rect x="120" y="270" width="930" height="46" fill="#FAECE7" opacity="0.7" rx="2"/><rect x="120" y="358" width="930" height="122" fill="#111" opacity="0.05" rx="2"/><rect x="120" y="484" width="930" height="52" fill="#F1EFE8" opacity="0.8" rx="2"/></g><!-- AXE ET REPÈRES --><g id="g-axis"><line x1="118" y1="42" x2="118" y2="536" stroke="#ccc" stroke-width="0.5"/><line x1="125" y1="338" x2="1050" y2="338" stroke="#999" stroke-width="0.5"/><line x1="125" y1="335" x2="125" y2="341" stroke="#aaa" stroke-width="0.7"/><text x="125" y="352" font-size="8.5" fill="#aaa" text-anchor="middle">1910</text><line x1="213" y1="335" x2="213" y2="341" stroke="#aaa" stroke-width="0.7"/><text x="213" y="352" font-size="8.5" fill="#aaa" text-anchor="middle">1920</text><line x1="301" y1="335" x2="301" y2="341" stroke="#aaa" stroke-width="0.7"/><text x="301" y="352" font-size="8.5" fill="#aaa" text-anchor="middle">1930</text><line x1="389" y1="335" x2="389" y2="341" stroke="#aaa" stroke-width="0.7"/><text x="389" y="352" font-size="8.5" fill="#aaa" text-anchor="middle">1940</text><line x1="477" y1="335" x2="477" y2="341" stroke="#aaa" stroke-width="0.7"/><text x="477" y="352" font-size="8.5" fill="#aaa" text-anchor="middle">1950</text><line x1="565" y1="335" x2="565" y2="341" stroke="#aaa" stroke-width="0.7"/><text x="565" y="352" font-size="8.5" fill="#aaa" text-anchor="middle">1960</text><line x1="653" y1="335" x2="653" y2="341" stroke="#aaa" stroke-width="0.7"/><text x="653" y="352" font-size="8.5" fill="#aaa" text-anchor="middle">1970</text><line x1="741" y1="335" x2="741" y2="341" stroke="#aaa" stroke-width="0.7"/><text x="741" y="352" font-size="8.5" fill="#aaa" text-anchor="middle">1980</text><line x1="829" y1="335" x2="829" y2="341" stroke="#aaa" stroke-width="0.7"/><text x="829" y="352" font-size="8.5" fill="#aaa" text-anchor="middle">1990</text><line x1="917" y1="335" x2="917" y2="341" stroke="#aaa" stroke-width="0.7"/><text x="917" y="352" font-size="8.5" fill="#aaa" text-anchor="middle">2000</text><line x1="1005" y1="335" x2="1005" y2="341" stroke="#aaa" stroke-width="0.7"/><text x="1005" y="352" font-size="8.5" fill="#aaa" text-anchor="middle">2010</text></g><!-- ÉTIQUETTES DE PISTE --><g id="g-track-labels"><text x="112" y="60" font-size="8.5" fill="#555" text-anchor="end">Linguistique</text><text x="112" y="72" font-size="8.5" fill="#555" text-anchor="end">structurale</text><text x="112" y="147" font-size="8.5" fill="#555" text-anchor="end">École de Prague</text><text x="112" y="216" font-size="8.5" fill="#555" text-anchor="end">Tradition</text><text x="112" y="228" font-size="8.5" fill="#555" text-anchor="end">britannique</text><text x="112" y="293" font-size="8.5" fill="#555" text-anchor="end">Sociologie</text><text x="112" y="415" font-size="8.5" fill="#555" text-anchor="end">Halliday</text><text x="112" y="427" font-size="8.5" fill="#555" text-anchor="end">/ LSF</text><text x="112" y="511" font-size="8.5" fill="#555" text-anchor="end">Extensions</text></g><!-- FLÈCHES D'INFLUENCE (toutes en <path> pour getTotalLength) --><path id="a-malf" d="M 342,221 L 486,221" stroke="#0F6E56" stroke-width="0.9" stroke-dasharray="5,2.5" fill="none" marker-end="url(#ar)"/><path id="a-saus" d="M 178,89 Q 375,255 572,366" stroke="#BA7517" stroke-width="0.9" stroke-dasharray="5,2.5" fill="none" marker-end="url(#ar)"/><path id="a-hjel" d="M 414,89 Q 493,255 572,366" stroke="#BA7517" stroke-width="0.9" stroke-dasharray="5,2.5" fill="none" marker-end="url(#ar)"/><path id="a-firt" d="M 537,245 Q 554,308 572,366" stroke="#0F6E56" stroke-width="0.9" stroke-dasharray="5,2.5" fill="none" marker-end="url(#ar)"/><path id="a-prag" d="M 265,167 Q 445,305 624,426" stroke="#534AB7" stroke-width="0.9" stroke-dasharray="5,2.5" fill="none" marker-end="url(#ar)"/><path id="a-bern" d="M 659,317 Q 690,372 721,426" stroke="#993C1D" stroke-width="0.9" stroke-dasharray="5,2.5" fill="none" marker-end="url(#ar)"/><path id="a-h1" d="M 572,414 L 624,426" stroke="#888" stroke-width="1" fill="none" marker-end="url(#ar)"/><path id="a-h2" d="M 624,474 L 677,366" stroke="#888" stroke-width="1" fill="none" marker-end="url(#ar)"/><path id="a-h3" d="M 677,414 L 721,426" stroke="#888" stroke-width="1" fill="none" marker-end="url(#ar)"/><path id="a-h4" d="M 721,474 L 782,366" stroke="#888" stroke-width="1" fill="none" marker-end="url(#ar)"/><path id="a-e1" d="M 782,414 Q 812,452 843,486" stroke="#aaa" stroke-width="0.9" stroke-dasharray="4,2" fill="none" marker-end="url(#ar)"/><path id="a-e2" d="M 782,414 Q 865,452 948,486" stroke="#aaa" stroke-width="0.9" stroke-dasharray="4,2" fill="none" marker-end="url(#ar)"/><!-- ÉTIQUETTES DE FLÈCHES --><g id="g-arrow-labels"><text x="335" y="185" font-size="7.5" font-style="italic" fill="#BA7517" text-anchor="middle">axe paradigmatique</text><text x="502" y="185" font-size="7.5" font-style="italic" fill="#BA7517" text-anchor="middle">stratification</text><text x="430" y="296" font-size="7.5" font-style="italic" fill="#534AB7" text-anchor="middle">Thème / Rhème</text><text x="414" y="212" font-size="7.5" font-style="italic" fill="#0F6E56" text-anchor="middle">ctx. de situation</text><text x="693" y="365" font-size="7.5" font-style="italic" fill="#993C1D" text-anchor="middle">codes sociaux</text></g><!-- NŒUDS --><g id="n-saussure"><rect x="127" y="41" width="102" height="48" rx="3" fill="#FEF3DC" stroke="#BA7517" stroke-width="0.8"/><text x="178" y="55" font-size="9.5" font-weight="700" fill="#633806" text-anchor="middle">F. de Saussure</text><text x="178" y="67" font-size="8" font-style="italic" fill="#633806" text-anchor="middle">Cours de ling. gén. (1916)</text><text x="178" y="79" font-size="7.5" fill="#854F0B" text-anchor="middle">Axe paradigmatique · valeur</text></g><g id="n-prague"><rect x="214" y="119" width="102" height="48" rx="3" fill="#EEEDFE" stroke="#534AB7" stroke-width="0.8"/><text x="265" y="133" font-size="9.5" font-weight="700" fill="#3C3489" text-anchor="middle">V. Mathesius</text><text x="265" y="145" font-size="8" font-style="italic" fill="#3C3489" text-anchor="middle">Cercle Ling. de Prague (1926+)</text><text x="265" y="157" font-size="7.5" fill="#534AB7" text-anchor="middle">Thème / Rhème · PFP</text></g><g id="n-malinowski"><rect x="240" y="197" width="102" height="48" rx="3" fill="#D5F0E6" stroke="#0F6E56" stroke-width="0.8"/><text x="291" y="211" font-size="9.5" font-weight="700" fill="#04342C" text-anchor="middle">B. Malinowski</text><text x="291" y="223" font-size="8" font-style="italic" fill="#04342C" text-anchor="middle">Signif. en lang. prim. (1923)</text><text x="291" y="235" font-size="7.5" fill="#0F6E56" text-anchor="middle">+ Coral Gardens (1935)</text></g><g id="n-hjelmslev"><rect x="363" y="41" width="102" height="48" rx="3" fill="#FEF3DC" stroke="#BA7517" stroke-width="0.8"/><text x="414" y="55" font-size="9.5" font-weight="700" fill="#633806" text-anchor="middle">L. Hjelmslev</text><text x="414" y="67" font-size="8" font-style="italic" fill="#633806" text-anchor="middle">Prolegomena (1943 / tr. 1953)</text><text x="414" y="79" font-size="7.5" fill="#854F0B" text-anchor="middle">Stratification · contenu/expression</text></g><g id="n-firth"><rect x="486" y="197" width="102" height="48" rx="3" fill="#D5F0E6" stroke="#0F6E56" stroke-width="0.8"/><text x="537" y="211" font-size="9.5" font-weight="700" fill="#04342C" text-anchor="middle">J.R. Firth</text><text x="537" y="223" font-size="8" font-style="italic" fill="#04342C" text-anchor="middle">Papers in Linguistics (1957)</text><text x="537" y="235" font-size="7.5" fill="#0F6E56" text-anchor="middle">Système · contexte · polysystém.</text></g><g id="n-bernstein"><rect x="608" y="269" width="102" height="48" rx="3" fill="#FAECE7" stroke="#993C1D" stroke-width="0.8"/><text x="659" y="283" font-size="9.5" font-weight="700" fill="#4A1B0C" text-anchor="middle">B. Bernstein</text><text x="659" y="295" font-size="8" font-style="italic" fill="#4A1B0C" text-anchor="middle">Class, Codes & Control (1971)</text><text x="659" y="307" font-size="7.5" fill="#993C1D" text-anchor="middle">Théorie des codes · lang./société</text></g><g id="n-h1961"><rect x="521" y="366" width="102" height="48" rx="3" fill="#1C1C1C" stroke="#444" stroke-width="0.8"/><text x="572" y="380" font-size="9.5" font-weight="700" fill="white" text-anchor="middle">M.A.K. Halliday</text><text x="572" y="392" font-size="8" font-style="italic" fill="#ddd" text-anchor="middle">"Categories…" (1961)</text><text x="572" y="404" font-size="7.5" fill="#bbb" text-anchor="middle">Scale & Category Grammar</text></g><g id="n-h1967"><rect x="573" y="426" width="102" height="48" rx="3" fill="#1C1C1C" stroke="#444" stroke-width="0.8"/><text x="624" y="440" font-size="9.5" font-weight="700" fill="white" text-anchor="middle">M.A.K. Halliday</text><text x="624" y="452" font-size="8" font-style="italic" fill="#ddd" text-anchor="middle">Transitivity & Theme (1967–68)</text><text x="624" y="464" font-size="7.5" fill="#bbb" text-anchor="middle">Metafunctions emerge</text></g><g id="n-h1973"><rect x="626" y="366" width="102" height="48" rx="3" fill="#1C1C1C" stroke="#444" stroke-width="0.8"/><text x="677" y="380" font-size="9.5" font-weight="700" fill="white" text-anchor="middle">M.A.K. Halliday</text><text x="677" y="392" font-size="8" font-style="italic" fill="#ddd" text-anchor="middle">Explorations (1973)</text><text x="677" y="404" font-size="7.5" fill="#bbb" text-anchor="middle">Three macrofunctions named</text></g><g id="n-h1978"><rect x="670" y="426" width="102" height="48" rx="3" fill="#1C1C1C" stroke="#444" stroke-width="0.8"/><text x="721" y="440" font-size="9.5" font-weight="700" fill="white" text-anchor="middle">M.A.K. Halliday</text><text x="721" y="452" font-size="8" font-style="italic" fill="#ddd" text-anchor="middle">Language as Social Semiotic (1978)</text><text x="721" y="464" font-size="7.5" fill="#bbb" text-anchor="middle">Social semiotic framework</text></g><g id="n-h1985"><rect x="731" y="366" width="102" height="48" rx="3" fill="#111" stroke="#666" stroke-width="1.1"/><text x="782" y="380" font-size="9.5" font-weight="700" fill="white" text-anchor="middle">M.A.K. Halliday</text><text x="782" y="392" font-size="8" font-style="italic" fill="#eee" text-anchor="middle">Intro. to Functional Grammar (1985)</text><text x="782" y="404" font-size="7.5" fill="#ccc" text-anchor="middle">Full SFL theory established</text></g><g id="n-martin"><rect x="792" y="486" width="102" height="48" rx="3" fill="#F1EFE8" stroke="#5F5E5A" stroke-width="0.8"/><text x="843" y="500" font-size="9.5" font-weight="700" fill="#2C2C2A" text-anchor="middle">J.R. Martin</text><text x="843" y="512" font-size="8" font-style="italic" fill="#2C2C2A" text-anchor="middle">English Text (1992)</text><text x="843" y="524" font-size="7.5" fill="#444" text-anchor="middle">Th. du genre · sém. du discours</text></g><g id="n-hm"><rect x="897" y="486" width="102" height="48" rx="3" fill="#F1EFE8" stroke="#5F5E5A" stroke-width="0.8"/><text x="948" y="500" font-size="9.5" font-weight="700" fill="#2C2C2A" text-anchor="middle">Halliday & Matth.</text><text x="948" y="512" font-size="8" font-style="italic" fill="#2C2C2A" text-anchor="middle">Intro. Functional Grammar (2004)</text><text x="948" y="524" font-size="7.5" fill="#444" text-anchor="middle">Expanded SFL model</text></g><!-- LÉGENDE --><g id="g-legend"><rect x="125" y="550" width="8" height="8" rx="1" fill="#FEF3DC" stroke="#BA7517" stroke-width="0.7"/><text x="137" y="558" font-size="8" fill="#888">Linguistique structurale</text><rect x="262" y="550" width="8" height="8" rx="1" fill="#EEEDFE" stroke="#534AB7" stroke-width="0.7"/><text x="274" y="558" font-size="8" fill="#888">École de Prague</text><rect x="362" y="550" width="8" height="8" rx="1" fill="#D5F0E6" stroke="#0F6E56" stroke-width="0.7"/><text x="374" y="558" font-size="8" fill="#888">Tradition britannique</text><rect x="475" y="550" width="8" height="8" rx="1" fill="#FAECE7" stroke="#993C1D" stroke-width="0.7"/><text x="487" y="558" font-size="8" fill="#888">Sociologie</text><rect x="543" y="550" width="8" height="8" rx="1" fill="#1C1C1C" stroke="#444" stroke-width="0.7"/><text x="555" y="558" font-size="8" fill="#888">Halliday / LSF</text><rect x="632" y="550" width="8" height="8" rx="1" fill="#F1EFE8" stroke="#5F5E5A" stroke-width="0.7"/><text x="644" y="558" font-size="8" fill="#888">Extensions</text><line x1="705" y1="554" x2="725" y2="554" stroke="#888" stroke-width="0.9" stroke-dasharray="4,2"/><text x="729" y="558" font-size="8" fill="#888">influence intellectuelle</text><line x1="836" y1="554" x2="856" y2="554" stroke="#888" stroke-width="1"/><text x="860" y="558" font-size="8" fill="#888">développement séquentiel</text></g></svg></div><button id="btn-replay">↺ Rejouer l'animation</button><script>const $ = id => document.getElementById(id);// ── Utilitaires ──────────────────────────────────────────────────────────────function setInstant(el, props) { el.style.transition = 'none'; Object.assign(el.style, props);}function fadeIn(id, delay, finalOpacity) { const el = $(id); if (!el) return; setInstant(el, { opacity: '0' }); setTimeout(() => { el.style.transition = 'opacity 0.65s ease'; el.style.opacity = String(finalOpacity ?? 1); }, delay);}function slideIn(id, delay) { const el = $(id); if (!el) return; setInstant(el, { opacity: '0', transform: 'translateY(9px)' }); setTimeout(() => { el.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; el.style.opacity = '1'; el.style.transform = 'translateY(0)'; }, delay);}function drawArrow(id, delay, dur) { const el = $(id); if (!el) return; const len = Math.ceil(el.getTotalLength()); const hasDash = el.getAttribute('stroke-dasharray'); if (!hasDash) el.style.strokeDasharray = len; setInstant(el, { opacity: '0', strokeDashoffset: len }); setTimeout(() => { el.style.transition = `stroke-dashoffset ${dur}ms ease, opacity 80ms ease`; el.style.strokeDashoffset = '0'; el.style.opacity = '1'; }, delay);}// ── Séquence principale ──────────────────────────────────────────────────────function startAnimation() { // 1. Remise à zéro ['g-title','g-bands','g-axis','g-track-labels','g-arrow-labels','g-legend', 'n-saussure','n-hjelmslev','n-prague','n-malinowski','n-firth','n-bernstein', 'n-h1961','n-h1967','n-h1973','n-h1978','n-h1985','n-martin','n-hm'] .forEach(id => { const e = $(id); if (e) setInstant(e, { opacity: '0', transform: '' }); }); ['a-saus','a-hjel','a-prag','a-malf','a-firt','a-bern', 'a-h1','a-h2','a-h3','a-h4','a-e1','a-e2'] .forEach(id => { const e = $(id); if (e) setInstant(e, { opacity: '0', strokeDashoffset: '9999' }); }); // Force reflow $('svg').getBoundingClientRect(); // 2. Phase 1 — Titre fadeIn('g-title', 300); // 3. Phase 2 — Bandes de fond fadeIn('g-bands', 900); // 4. Phase 3 — Axe chronologique fadeIn('g-axis', 1700); // 5. Phase 4 — Étiquettes de piste fadeIn('g-track-labels', 2200); // 6. Phase 5 — Nœuds (chronologiques, 420 ms d'écart) [ ['n-saussure', 3000], ['n-prague', 3420], ['n-malinowski', 3840], ['n-hjelmslev', 4260], ['n-firth', 4680], ['n-bernstein', 5100], ['n-h1961', 5600], ['n-h1967', 6020], ['n-h1973', 6440], ['n-h1978', 6860], ['n-h1985', 7280], ['n-martin', 7700], ['n-hm', 8120], ].forEach(([id, t]) => slideIn(id, t)); // 7. Phase 6 — Tracé des flèches [ ['a-malf', 8700, 650], ['a-saus', 9150, 800], ['a-hjel', 9600, 700], ['a-firt', 9950, 550], ['a-prag', 10300, 800], ['a-bern', 10750, 600], ['a-h1', 11150, 380], ['a-h2', 11450, 500], ['a-h3', 11800, 380], ['a-h4', 12100, 500], ['a-e1', 12450, 600], ['a-e2', 12900, 700], ].forEach(([id, t, dur]) => drawArrow(id, t, dur)); // 8. Phase 7 — Étiquettes de flèches + légende fadeIn('g-arrow-labels', 13500); fadeIn('g-legend', 14000);}$('btn-replay').addEventListener('click', startAnimation);startAnimation();</script></body></html>
Association française de linguistique systémique fonctionnelle 