Created
February 17, 2026 21:16
-
-
Save lassebenni/c97d5efbf24864c18359609c342384a3 to your computer and use it in GitHub Desktop.
Animation for: Nested Calls vs Linear Pipeline
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nested vs Linear Pipeline</title> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| background: #1a1a2e; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| } | |
| svg { max-width: 100%; height: auto; } | |
| .title-text { | |
| font-size: 14px; | |
| fill: #e0e0e0; | |
| text-anchor: middle; | |
| font-weight: 700; | |
| } | |
| .section-title { | |
| font-size: 13px; | |
| font-weight: 700; | |
| text-anchor: start; | |
| } | |
| .code-text { | |
| font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; | |
| font-size: 11px; | |
| } | |
| .code-bg { | |
| fill: #0d1117; | |
| rx: 6; ry: 6; | |
| stroke: #30363d; | |
| stroke-width: 1; | |
| } | |
| .label-text { | |
| font-size: 10px; | |
| fill: #90a4ae; | |
| text-anchor: middle; | |
| } | |
| .divider { | |
| stroke: #30363d; | |
| stroke-width: 1; | |
| stroke-dasharray: 4 3; | |
| } | |
| /* --- TOP: Nested (confusing) --- */ | |
| /* Funnel arrows going inward */ | |
| .nest-arrow { | |
| fill: none; | |
| stroke: #ef5350; | |
| stroke-width: 1.5; | |
| opacity: 0; | |
| } | |
| .nest-arrow-1 { animation: nestFlow1 5s ease-in-out infinite; } | |
| .nest-arrow-2 { animation: nestFlow2 5s ease-in-out 0.6s infinite; } | |
| .nest-arrow-3 { animation: nestFlow3 5s ease-in-out 1.2s infinite; } | |
| @keyframes nestFlow1 { | |
| 0%, 10% { opacity: 0; } | |
| 20% { opacity: 1; } | |
| 50% { opacity: 1; } | |
| 70% { opacity: 0; } | |
| 100% { opacity: 0; } | |
| } | |
| @keyframes nestFlow2 { | |
| 0%, 10% { opacity: 0; } | |
| 25% { opacity: 1; } | |
| 55% { opacity: 1; } | |
| 75% { opacity: 0; } | |
| 100% { opacity: 0; } | |
| } | |
| @keyframes nestFlow3 { | |
| 0%, 10% { opacity: 0; } | |
| 30% { opacity: 1; } | |
| 60% { opacity: 1; } | |
| 80% { opacity: 0; } | |
| 100% { opacity: 0; } | |
| } | |
| /* Confusion indicator */ | |
| .confused { | |
| font-size: 12px; | |
| fill: #ef5350; | |
| text-anchor: middle; | |
| opacity: 0; | |
| animation: fadeConfused 5s ease-in-out infinite; | |
| } | |
| @keyframes fadeConfused { | |
| 0%, 40% { opacity: 0; } | |
| 55% { opacity: 1; } | |
| 85% { opacity: 1; } | |
| 100% { opacity: 0; } | |
| } | |
| /* Reading order numbers */ | |
| .read-order { | |
| font-size: 9px; | |
| font-weight: 700; | |
| fill: #ef5350; | |
| text-anchor: middle; | |
| opacity: 0; | |
| } | |
| .read-order-1 { animation: showOrder 5s ease-in-out 1.8s infinite; } | |
| .read-order-2 { animation: showOrder 5s ease-in-out 1.2s infinite; } | |
| .read-order-3 { animation: showOrder 5s ease-in-out 0.6s infinite; } | |
| .read-order-4 { animation: showOrder 5s ease-in-out 0.0s infinite; } | |
| @keyframes showOrder { | |
| 0%, 15% { opacity: 0; } | |
| 25% { opacity: 1; } | |
| 70% { opacity: 1; } | |
| 85% { opacity: 0; } | |
| 100% { opacity: 0; } | |
| } | |
| /* --- BOTTOM: Linear (clear) --- */ | |
| .step-box { | |
| rx: 6; ry: 6; | |
| stroke-width: 1.5; | |
| } | |
| .step-label { | |
| font-size: 11px; | |
| text-anchor: middle; | |
| font-weight: 600; | |
| } | |
| /* Data packet flowing left to right */ | |
| .linear-packet { | |
| fill: #4caf7a; | |
| opacity: 0; | |
| animation: linearFlow 5s ease-in-out infinite; | |
| } | |
| @keyframes linearFlow { | |
| 0% { opacity: 0; transform: translate(0, 0); } | |
| 8% { opacity: 1; transform: translate(0, 0); } | |
| 28% { opacity: 1; transform: translate(140px, 0); } | |
| 32% { opacity: 1; transform: translate(140px, 0); } | |
| 52% { opacity: 1; transform: translate(280px, 0); } | |
| 56% { opacity: 1; transform: translate(280px, 0); } | |
| 76% { opacity: 1; transform: translate(420px, 0); } | |
| 85% { opacity: 1; transform: translate(420px, 0); } | |
| 95% { opacity: 0; transform: translate(420px, 0); } | |
| 100% { opacity: 0; transform: translate(420px, 0); } | |
| } | |
| /* Flow arrows */ | |
| .flow-arrow { | |
| stroke: #4caf7a; | |
| stroke-width: 1.5; | |
| fill: none; | |
| } | |
| .flow-arrow-head { | |
| fill: #4caf7a; | |
| } | |
| /* Clear checkmark */ | |
| .clear-check { | |
| fill: none; | |
| stroke: #4caf7a; | |
| stroke-width: 2.5; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| opacity: 0; | |
| animation: clearShow 5s ease-in-out infinite; | |
| } | |
| @keyframes clearShow { | |
| 0%, 70% { opacity: 0; } | |
| 80% { opacity: 1; } | |
| 95% { opacity: 1; } | |
| 100% { opacity: 0; } | |
| } | |
| .clear-label { | |
| font-size: 11px; | |
| fill: #4caf7a; | |
| font-weight: 600; | |
| opacity: 0; | |
| animation: clearShow 5s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg viewBox="0 0 600 350" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- Title --> | |
| <text x="300" y="25" class="title-text">Nested calls vs Linear pipeline: Which is easier to read?</text> | |
| <!-- Divider --> | |
| <line class="divider" x1="20" y1="170" x2="580" y2="170" /> | |
| <!-- === TOP HALF: Nested === --> | |
| <text x="30" y="52" class="section-title" style="fill:#ef5350;">Nested (inside-out reading)</text> | |
| <!-- Code block showing nested call --> | |
| <rect class="code-bg" x="30" y="60" width="410" height="32" /> | |
| <text class="code-text" x="42" y="81"> | |
| <tspan fill="#61afef">save</tspan><tspan fill="#abb2bf">(</tspan> | |
| <tspan fill="#61afef">clean</tspan><tspan fill="#abb2bf">(</tspan> | |
| <tspan fill="#61afef">load</tspan><tspan fill="#abb2bf">(</tspan> | |
| <tspan fill="#98c379">"data.csv"</tspan> | |
| <tspan fill="#abb2bf">)))</tspan> | |
| </text> | |
| <!-- Reading order numbers (showing you read from inside out) --> | |
| <circle cx="217" cy="100" r="8" fill="none" stroke="#ef5350" stroke-width="1" class="read-order read-order-1" style="animation-name: showOrder;" /> | |
| <text x="217" y="104" class="read-order read-order-1">1</text> | |
| <text x="217" y="117" class="read-order read-order-1" style="font-size:8px; fill:#78909c;">load</text> | |
| <circle cx="155" cy="100" r="8" fill="none" stroke="#ef5350" stroke-width="1" class="read-order read-order-2" style="animation-name: showOrder;" /> | |
| <text x="155" y="104" class="read-order read-order-2">2</text> | |
| <text x="155" y="117" class="read-order read-order-2" style="font-size:8px; fill:#78909c;">clean</text> | |
| <circle cx="100" cy="100" r="8" fill="none" stroke="#ef5350" stroke-width="1" class="read-order read-order-3" style="animation-name: showOrder;" /> | |
| <text x="100" y="104" class="read-order read-order-3">3</text> | |
| <text x="100" y="117" class="read-order read-order-3" style="font-size:8px; fill:#78909c;">save</text> | |
| <!-- Funnel arrows showing inward reading --> | |
| <path class="nest-arrow nest-arrow-1" d="M380,80 C340,80 310,90 280,80" /> | |
| <polygon fill="#ef5350" points="282,76 272,80 282,84" class="nest-arrow nest-arrow-1" /> | |
| <path class="nest-arrow nest-arrow-2" d="M270,80 C240,80 210,90 185,80" /> | |
| <polygon fill="#ef5350" points="187,76 177,80 187,84" class="nest-arrow nest-arrow-2" /> | |
| <path class="nest-arrow nest-arrow-3" d="M175,80 C155,80 135,90 115,80" /> | |
| <polygon fill="#ef5350" points="117,76 107,80 117,84" class="nest-arrow nest-arrow-3" /> | |
| <!-- Confusion label --> | |
| <text x="500" y="82" class="confused">Read inside-out?</text> | |
| <text x="500" y="100" class="confused" style="font-size:10px;">Hard to follow!</text> | |
| <!-- Brain icon showing confusion --> | |
| <g class="confused" transform="translate(480, 115)"> | |
| <text x="0" y="0" style="font-size:9px; fill:#ef5350; text-anchor:start;">execution order:</text> | |
| <text x="0" y="14" style="font-size:9px; fill:#ef5350; text-anchor:start; font-family:monospace;">3 ( 2 ( 1 ( ) ) )</text> | |
| </g> | |
| <!-- === BOTTOM HALF: Linear === --> | |
| <text x="30" y="195" class="section-title" style="fill:#4caf7a;">Linear (left-to-right reading)</text> | |
| <!-- Code block showing linear steps --> | |
| <rect class="code-bg" x="30" y="203" width="350" height="55" /> | |
| <text class="code-text" x="42" y="221"> | |
| <tspan fill="#c678dd">data</tspan> | |
| <tspan fill="#abb2bf"> = </tspan> | |
| <tspan fill="#61afef">load</tspan> | |
| <tspan fill="#abb2bf">(</tspan> | |
| <tspan fill="#98c379">"data.csv"</tspan> | |
| <tspan fill="#abb2bf">)</tspan> | |
| </text> | |
| <text class="code-text" x="42" y="237"> | |
| <tspan fill="#c678dd">data</tspan> | |
| <tspan fill="#abb2bf"> = </tspan> | |
| <tspan fill="#61afef">clean</tspan> | |
| <tspan fill="#abb2bf">(data)</tspan> | |
| </text> | |
| <text class="code-text" x="42" y="253"> | |
| <tspan fill="#61afef">save</tspan> | |
| <tspan fill="#abb2bf">(data)</tspan> | |
| </text> | |
| <!-- Visual flow boxes --> | |
| <rect class="step-box" x="80" y="278" width="80" height="35" fill="#1e2d3d" stroke="#61afef" /> | |
| <text x="120" y="300" class="step-label" style="fill:#61afef;">load()</text> | |
| <line class="flow-arrow" x1="165" y1="296" x2="210" y2="296" /> | |
| <polygon class="flow-arrow-head" points="210,292 220,296 210,300" /> | |
| <rect class="step-box" x="225" y="278" width="80" height="35" fill="#1e2d3d" stroke="#61afef" /> | |
| <text x="265" y="300" class="step-label" style="fill:#61afef;">clean()</text> | |
| <line class="flow-arrow" x1="310" y1="296" x2="355" y2="296" /> | |
| <polygon class="flow-arrow-head" points="355,292 365,296 355,300" /> | |
| <rect class="step-box" x="370" y="278" width="80" height="35" fill="#1e2d3d" stroke="#61afef" /> | |
| <text x="410" y="300" class="step-label" style="fill:#61afef;">save()</text> | |
| <!-- Data packet --> | |
| <circle class="linear-packet" cx="100" cy="296" r="5" /> | |
| <!-- Clear label --> | |
| <polyline class="clear-check" points="478,286 488,298 508,272" /> | |
| <text x="530" y="290" class="clear-label">Easy to</text> | |
| <text x="530" y="305" class="clear-label">follow!</text> | |
| <!-- Bottom caption --> | |
| <text x="300" y="340" class="label-text" style="font-size:11px;">Read top to bottom, left to right. Each step is one line.</text> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment