<html>
<body>
<svg viewBox="0 0 692 422" id="diagram">
<rect width="692" height="422" fill="#F9F9F9" id="bg" />
<g id="tree_flushed">
<g id="before">
<g class="rails_flushed">
<path id="12" d="M217 269H301" />
<path id="10" d="M258 205L217 269" />
<path id="9" d="M217 141L258 205" />
<path id="8" d="M133 141H217" />
<path id="7" d="M174 205H90" />
<path id="6" d="M91 333H174" />
<path id="5" d="M133 269L91 333" />
<path id="4" d="M49 269H133" />
<path id="3" d="M90 205L49 269" />
<path id="2" d="M90 205L133 141" />
<path id="1" d="M174 77L133 141" />
</g>
<g class="nodes_flushed">
<g id="d4">
<circle cx="301" cy="269" r="18" />
<text>
<tspan x="291.266" y="274.52">D4</tspan>
</text>
</g>
<g id="d3">
<circle cx="217" cy="269" r="18" />
<text>
<tspan x="207.266" y="274.52">D3</tspan>
</text>
</g>
<g id="c3">
<circle cx="258" cy="205" r="18" />
<text>
<tspan x="248.266" y="210.52">C3</tspan>
</text>
</g>
<g id="b2">
<circle cx="217" cy="141" r="18" />
<text>
<tspan x="207.266" y="146.52">B2</tspan>
</text>
</g>
<g id="c2">
<circle cx="174" cy="205" r="18" />
<text>
<tspan x="164.266" y="210.52">C2</tspan>
</text>
</g>
<g id="e2">
<circle cx="174" cy="333" r="18" />
<text>
<tspan x="164.211" y="338.52">E2</tspan>
</text>
</g>
<g id="e1">
<circle cx="90" cy="333" r="18" />
<text>
<tspan x="80.2109" y="338.52">E2</tspan>
</text>
</g>
<g id="d2">
<circle cx="133" cy="269" r="18" />
<text>
<tspan x="123.266" y="274.52">D2</tspan>
</text>
</g>
<g id="d1">
<circle cx="49" cy="269" r="18" />
<text>
<tspan x="39.2656" y="274.52">D1</tspan>
</text>
</g>
<g id="c1">
<circle cx="90" cy="205" r="18" />
<text>
<tspan x="80.2656" y="210.52">C1</tspan>
</text>
</g>
<g id="b1">
<circle cx="133" cy="141" r="18" />
<text>
<tspan x="123.266" y="146.52">B1</tspan>
</text>
</g>
<g id="a1">
<circle cx="174" cy="77" r="18" />
<text>
<tspan x="164.266" y="82.5195">A1</tspan>
</text>
</g>
</g>
</g>
<g id="after">
<g class="rails_flushed">
<path d="M217 269H301" />
<path d="M217 269L258 333" />
<path d="M258 205L217 269" />
<path d="M217 141L258 205" />
<path d="M133 141H217" />
<path d="M174 205H90" />
<path d="M133 269L91 333" />
<path d="M49 269H133" />
<path d="M90 205L49 269" />
<path d="M90 205L133 141" />
<path d="M174 77L133 141" />
</g>
<g class="nodes_flushed">
<g id="d4">
<circle cx="301" cy="269" r="18" />
<text>
<tspan x="291.266" y="274.52">D4</tspan>
</text>
</g>
<g id="e3">
<circle cx="258" cy="333" r="18" />
<text>
<tspan x="248.211" y="338.52">E3</tspan>
</text>
</g>
<g id="d3">
<circle cx="217" cy="269" r="18" />
<text>
<tspan x="207.266" y="274.52">D3</tspan>
</text>
</g>
<g id="c3">
<circle cx="258" cy="205" r="18" />
<text>
<tspan x="248.266" y="210.52">C3</tspan>
</text>
</g>
<g id="b2">
<circle cx="217" cy="141" r="18" />
<text>
<tspan x="207.266" y="146.52">B2</tspan>
</text>
</g>
<g id="c2">
<circle cx="174" cy="205" r="18" />
<text>
<tspan x="164.266" y="210.52">C2</tspan>
</text>
</g>
<g id="e1">
<path d="M90.5 307L114.316 348.25H66.6843L90.5 307Z" />
<text>
<tspan x="80.2109" y="338.52">E1</tspan>
</text>
</g>
<g id="d2">
<circle cx="133" cy="269" r="18" />
<text>
<tspan x="123.266" y="274.52">D2</tspan>
</text>
</g>
<g id="d1">
<circle cx="49" cy="269" r="18" />
<text>
<tspan x="39.2656" y="274.52">D1</tspan>
</text>
</g>
<g id="c1">
<circle cx="90" cy="205" r="18" />
<text>
<tspan x="80.2656" y="210.52">C1</tspan>
</text>
</g>
<g id="b1">
<circle cx="133" cy="141" r="18" />
<text>
<tspan x="123.266" y="146.52">B1</tspan>
</text>
</g>
<g id="a1">
<circle cx="174" cy="77" r="18" />
<text>
<tspan x="164.266" y="82.5195">A1</tspan>
</text>
</g>
</g>
</g>
</g>
<g id="tree_wip">
<g id="rails">
<path id="rail12" d="M558 269H642" />
<path id="rail11" d="M558 269L599 333" />
<path id="rail10" d="M599 205L558 269" />
<path id="rail9" d="M558 141L599 205" />
<path id="rail8" d="M474 141H558" />
<path id="rail7" d="M515 205H431" />
<path id="rail6" d="M432 333H515" />
<path id="rail5" d="M474 269L432 333" />
<path id="rail4" d="M390 269H474" />
<path id="rail3" d="M431 205L390 269" />
<path id="rail2" d="M431 205L474 141" />
<path id="rail1" d="M515 77L474 141" />
</g>
<g id="tracks">
<path
id="track24"
class="return reverse"
d="M518.368 79.1577L477.368 143.158"
/>
<path id="track23" class="return reverse" d="M474 137H558" />
<path
id="track22"
class="return reverse"
d="M561.368 138.842L602.368 202.842"
/>
<path
id="track21"
class="return reverse"
d="M602.368 207.158L561.368 271.158"
/>
<path id="track20" class="return reverse" d="M558 265H642" />
<path id="track19" class="sibling" d="M558 273H642" />
<path
id="track18"
class="return reverse"
d="M561.368 266.842L602.368 330.842"
/>
<path
id="track17"
class="child"
d="M554.632 271.158L595.632 335.158"
/>
<path
id="track16"
class="child"
d="M595.632 202.842L554.632 266.842"
/>
<path
id="track15"
class="child"
d="M554.632 143.158L595.632 207.158"
/>
<path id="track14" class="sibling" d="M474 145H558" />
<path
id="track13"
class="return"
d="M434.32 207.231L477.32 143.231"
/>
<path id="track12" class="return" d="M515 201H431" />
<path id="track11" class="sibling reverse" d="M515 209H431" />
<path
id="track10"
class="return reverse"
d="M434.368 207.158L393.368 271.158"
/>
<path id="track9" class="return reverse" d="M390 265H474" />
<path
id="track8"
class="return reverse"
d="M477.344 271.195L435.344 335.195"
/>
<path id="track7" class="return reverse" d="M432 329H515" />
<path id="track6" class="sibling" d="M432 337H515" />
<path
id="track5"
class="child"
d="M470.656 266.805L428.656 330.805"
/>
<path id="track4" class="sibling" d="M390 273H474" />
<path
id="track3"
class="child"
d="M427.632 202.842L386.632 266.842"
/>
<path
id="track2"
class="child reverse"
d="M427.68 202.769L470.68 138.769"
/>
<path
id="track1"
class="child"
d="M511.632 74.8423L470.632 138.842"
id="a1"
cx="515"
cy="77"
r="19.5"
/>
<circle id="d4" cx="642" cy="269" r="19.5" />
<circle id="e3" cx="599" cy="333" r="19.5" />
<circle id="d3" cx="558" cy="269" r="19.5" />
<circle id="c3" cx="599" cy="205" r="19.5" />
<circle id="b2" cx="558" cy="141" r="19.5" />
<circle id="c2" cx="515" cy="205" r="19.5" />
<circle id="e2" cx="515" cy="333" r="19.5" />
<path
id="e1"
d="M432.799 306.25L431.5 304L430.201 306.25L406.385 347.5L405.086 349.75H407.684H455.316H457.914L456.615 347.5L432.799 306.25Z"
/>
<circle id="d2" cx="474" cy="269" r="19.5" />
<circle id="d1" cx="390" cy="269" r="19.5" />
<circle id="c1" cx="431" cy="205" r="19.5" />
<circle id="b1" cx="474" cy="141" r="19.5" />
<circle id="a1" cx="515" cy="77" r="19.5" />
</g>
<g id="nodes">
<g id="d4">
<circle class="bg" cx="642" cy="269" r="18" />
<text>
<tspan x="632.266" y="274.52">D4</tspan>
</text>
</g>
<g id="e3">
<circle class="bg" cx="599" cy="333" r="18" />
<text>
<tspan x="589.211" y="338.52">E3</tspan>
</text>
</g>
<g id="d3">
<circle class="bg" cx="558" cy="269" r="18" />
<text>
<tspan x="548.266" y="274.52">D3</tspan>
</text>
</g>
<g id="c3">
<circle class="bg" cx="599" cy="205" r="18" />
<text>
<tspan x="589.266" y="210.52">C3</tspan>
</text>
</g>
<g id="b2">
<circle class="bg" cx="558" cy="141" r="18" />
<text>
<tspan x="548.266" y="146.52">B2</tspan>
</text>
</g>
<g id="c2">
<circle class="bg" cx="515" cy="205" r="18" />
<text>
<tspan x="505.266" y="210.52">C2</tspan>
</text>
</g>
<g id="e2">
<circle class="bg" cx="515" cy="333" r="18" />
<text>
<tspan x="505.211" y="338.52">E2</tspan>
</text>
</g>
<g id="e1">
<path class="bg" d="M431.5 307L455.316 348.25H407.684L431.5 307Z" />
<text>
<tspan x="421.211" y="338.52">E1</tspan>
</text>
</g>
<g id="d2">
<circle class="bg" cx="474" cy="269" r="18" />
<text>
<tspan x="464.266" y="274.52">D2</tspan>
</text>
</g>
<g id="d1">
<circle class="bg" cx="390" cy="269" r="18" />
<text>
<tspan x="380.266" y="274.52">D1</tspan>
</text>
</g>
<g id="c1">
<circle class="bg" cx="431" cy="205" r="18" />
<text>
<tspan x="421.266" y="210.52">C1</tspan>
</text>
</g>
<g id="b1">
<circle class="bg" cx="474" cy="141" r="18" />
<text>
<tspan x="464.266" y="146.52">B1</tspan>
</text>
</g>
<g id="a1">
<circle class="bg" cx="515" cy="77" r="18" />
<text>
<tspan x="505.266" y="82.5195">A1</tspan>
</text>
</g>
</g>
<g id="effects">
<circle id="e1" cx="444" cy="320" r="8" />
<circle id="e2" cx="528" cy="320" r="8" />
<circle id="e3" cx="612" cy="320" r="8" />
</g>
</g>
<g id="keys">
<g id="flushed">
<rect
x="59"
y="390"
width="73.7229"
height="28.3208"
fill="#ffc793"
/>
<text>
<tspan x="81.2935" y="401.772">flushed</tspan>
<tspan x="87.0547" y="412.772">fiber</tspan>
</text>
</g>
<g id="unexplored">
<rect
x="141"
y="390"
width="73.7229"
height="28.3208"
fill="#DDDDDD"
/>
<text>
<tspan x="155.665" y="407.272">unexplored</tspan>
</text>
</g>
<g id="begun">
<rect
x="223"
y="390"
width="73.7229"
height="28.3208"
fill="#BDEADA"
/>
<text>
<tspan x="247.524" y="401.772">began</tspan>
<tspan x="250.543" y="412.772">work</tspan>
</text>
</g>
<g id="complete">
<rect
x="305"
y="390"
width="73.7229"
height="28.3208"
fill="#CAE0F4"
/>
<text>
<tspan x="320.643" y="401.772">completed</tspan>
<tspan x="331.915" y="412.772">work</tspan>
</text>
</g>
<g id="child">
<path d="M441.273 415H387" stroke="#B88EB9" stroke-width="6" />
<text>
<tspan x="405.511" y="404.275">child</tspan>
</text>
</g>
<g id="sibling">
<path d="M503.273 415H449" stroke="#8E9AB9" stroke-width="6" />
<text>
<tspan x="463.626" y="404.275">sibling</tspan>
</text>
</g>
<g id="return">
<path d="M565.273 415H511" stroke="#999999" stroke-width="6" />
<text>
<tspan x="525.933" y="404.275">return</tspan>
</text>
</g>
<g id="effect">
<circle cx="616" cy="395" r="8" fill="#999999" />
<text>
<tspan x="585.04" y="407.052">effect</tspan>
</text>
</g>
</g>
<g id="root">
<g id="pointer_new">
<path
class="arrow"
d="M515.707 55.7071C515.317 56.0976 514.683 56.0976 514.293 55.7071L507.929 49.3431C507.538 48.9526 507.538 48.3195 507.929 47.9289C508.319 47.5384 508.953 47.5384 509.343 47.9289L514 52.5858V36H346V34H516V52.5858L520.657 47.9289C521.047 47.5384 521.681 47.5384 522.071 47.9289C522.462 48.3195 522.462 48.9526 522.071 49.3431L515.707 55.7071Z"
/>
<text><tspan x="405.586" y="31.5195">current</tspan></text>
</g>
<g id="pointer_old">
<path
class="arrow"
d="M174.707 58.7071C174.317 59.0976 173.683 59.0976 173.293 58.7071L166.929 52.3431C166.538 51.9526 166.538 51.3195 166.929 50.9289C167.319 50.5384 167.953 50.5384 168.343 50.9289L173 55.5858V34H346V36H175V55.5858L179.657 50.9289C180.047 50.5384 180.681 50.5384 181.071 50.9289C181.462 51.3195 181.462 51.9526 181.071 52.3431L174.707 58.7071Z"
fill="#656565"
/>
<text><tspan x="235" y="31.5195">current</tspan></text>
</g>
<g id="alternate_new">
<path
class="arrow"
d="M198.657 84.071L192.293 77.707C191.902 77.3165 191.902 76.6833 192.293 76.2928L198.657 69.9288C199.047 69.5383 199.681 69.5383 200.071 69.9288C200.462 70.3194 200.462 70.9525 200.071 71.3431L195.414 75.9999L494 75.9999L494 77.9999L195.414 77.9999L200.071 82.6568C200.462 83.0473 200.462 83.6804 200.071 84.071C199.681 84.4615 199.047 84.4615 198.657 84.071Z"
fill="#656565"
/>
<text><tspan x="315" y="94.5195">alternate</tspan></text>
</g>
<g id="alternate_old">
<path
class="arrow"
d="M488.343 69.9289L494.707 76.2928C495.098 76.6834 495.098 77.3165 494.707 77.7071L488.343 84.071C487.953 84.4615 487.319 84.4615 486.929 84.071C486.538 83.6805 486.538 83.0473 486.929 82.6568L491.586 77.9999H193V75.9999H491.586L486.929 71.3431C486.538 70.9526 486.538 70.3194 486.929 69.9289C487.319 69.5384 487.953 69.5384 488.343 69.9289Z"
fill="#656565"
/>
<text><tspan x="315" y="94.5195">alternate</tspan></text>
</g>
<g id="rooot">
<circle cx="346" cy="35" r="24" fill="#656565" />
<text>
<tspan x="332.383" y="39.8296">root</tspan>
</text>
</g>
</g>
</svg>
<p class="footnote">link to <a href="https://medium.com/@bailey.lee/react-deep-dive-fiber-88860f6edbd0" target="_blank">article</a></p>
</body>
</html>
$offset: 1000ms;
$halfFrame: 200ms;
$frame: 400ms;
@function delay($n) {
@return $offset + $frame * $n;
}
#diagram text {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 10pt;
font-weight: bold;
text-align: center;
fill: #333;
}
#root text {
font-size: 8pt;
font-weight: normal;
fill: #666;
}
#rooot text {
font-size: 9pt;
font-weight: bold;
fill: #fff;
}
#root .arrow {
fill: #999;
}
#keys text {
font-size: 6pt;
}
#tree_flushed .rails_flushed path {
stroke: #eeeeee;
stroke-width: 8;
}
#tree_flushed #nodes_flushed text,
#nodes text {
font-weight: bold;
}
#tree_flushed #before .nodes_flushed path,
#tree_flushed #before .nodes_flushed circle {
fill: #ffc793;
}
#tree_flushed #after .nodes_flushed path,
#tree_flushed #after .nodes_flushed circle {
fill: #ddd;
}
#rails path {
fill: none;
stroke: #eeeeee;
stroke-width: 8;
}
#nodes path,
#nodes circle {
fill: #dddddd;
}
#tracks path,
#tracks circle {
stroke: #999999;
stroke-width: 4;
fill: none;
}
#tracks path.child {
stroke: #b88eb9;
}
#tracks path.sibling {
stroke: #8e9ab9;
}
#tracks path.return {
stroke: #999999;
}
#effects circle {
fill: #999999;
opacity: 0;
}
#root #pointer_old,
#root #alternate_old {
opacity: 1;
animation: disappear $frame linear delay(44) forwards;
}
#root #pointer_new,
#root #alternate_new {
opacity: 0;
animation: appear $frame linear delay(45) forwards;
}
#tracks path {
stroke-dasharray: 80;
stroke-dashoffset: 80;
animation: outlinePath $frame linear forwards;
}
#tracks path.reverse {
stroke-dashoffset: -80;
animation: outlinePathReverse $frame linear forwards;
}
#tracks circle {
stroke-dasharray: 126;
stroke-dashoffset: 126;
animation: outlineCircle $frame linear forwards;
}
#tracks #e1 {
stroke-dasharray: 160;
stroke-dashoffset: 160;
animation: outlineTriangle $frame linear forwards;
}
#tree_flushed #before {
opacity: 1;
animation: disappear $frame linear delay(41) forwards;
}
#tree_flushed #after {
opacity: 0;
animation: appear $frame linear delay(42) forwards;
}
// ---------- animation timing
#tracks #a1 {
animation-delay: delay(0);
}
#nodes #a1 .bg {
animation: beginWork $halfFrame linear delay(0) forwards,
completeWork $halfFrame linear delay(37) forwards,
commitWork $halfFrame linear delay(40) forwards;
}
#tracks #track1 {
animation-delay: delay(1);
}
#tracks #b1 {
animation-delay: delay(2);
}
#nodes #b1 .bg {
animation: beginWork $halfFrame linear delay(2) forwards,
completeWork $halfFrame linear delay(36) forwards,
commitWork $halfFrame linear delay(40) forwards;
animation: beginWork $halfFrame linear delay(2) forwards,
completeWork $halfFrame linear delay(36) forwards,
commitWork $halfFrame linear delay(40) forwards;
}
#tracks #track2 {
animation-delay: delay(3);
}
#tracks #c1 {
animation-delay: delay(4);
}
#nodes #c1 .bg {
animation: beginWork $halfFrame linear delay(4) forwards,
completeWork $halfFrame linear delay(19) forwards,
commitWork $halfFrame linear delay(40) forwards;
}
#tracks #track3 {
animation-delay: delay(5);
}
#tracks #d1 {
animation-delay: delay(6);
}
#nodes #d1 .bg {
animation: beginWork $halfFrame linear delay(6) forwards,
completeWork $halfFrame linear delay(16) forwards,
commitWork $halfFrame linear delay(40) forwards;
}
#tracks #track4 {
animation-delay: delay(7);
}
#tracks #d2 {
animation-delay: delay(8);
}
#nodes #d2 .bg {
animation: beginWork $halfFrame linear delay(8) forwards,
completeWork $halfFrame linear delay(15) forwards,
commitWork $halfFrame linear delay(40) forwards;
}
#tracks #track5 {
animation-delay: delay(9);
}
#tracks #e1 {
animation-delay: delay(10);
}
#nodes #e1 .bg {
animation: beginWork $halfFrame linear delay(10) forwards,
completeWork $halfFrame linear delay(14) forwards,
commitWork $halfFrame linear delay(40) forwards;
}
#tracks #track6 {
animation-delay: delay(11);
}
#tracks #e2 {
animation-delay: delay(12);
}
#nodes #e2 .bg {
animation: beginWork $halfFrame linear delay(12) forwards,
completeWork $halfFrame linear delay(12.5) forwards,
commitWork $halfFrame linear delay(40) forwards;
}
#effects #e2 {
animation: appear $halfFrame linear delay(12.5) forwards,
disappear $halfFrame linear delay(40) forwards;
}
#tracks #track7 {
animation-delay: delay(13);
}
#effects #e1 {
animation: appear $halfFrame linear delay(14) forwards,
disappear $halfFrame linear delay(40) forwards;
}
#tracks #track8 {
animation-delay: delay(14);
}
#tracks #track9 {
animation-delay: delay(15);
}
#tracks #track10 {
animation-delay: delay(16);
}
#tracks #track11 {
animation-delay: delay(17);
}
#tracks #c2 {
animation-delay: delay(18);
}
#nodes #c2 .bg {
animation: beginWork $halfFrame linear delay(18) forwards,
completeWork $halfFrame linear delay(18.5) forwards,
commitWork $halfFrame linear delay(40) forwards;
}
#tracks #track12 {
animation-delay: delay(19);
}
#tracks #track13 {
animation-delay: delay(20);
}
#tracks #track14 {
animation-delay: delay(21);
}
#tracks #b2 {
animation-delay: delay(22);
}
#nodes #b2 .bg {
animation: beginWork $halfFrame linear delay(22) forwards,
completeWork $halfFrame linear delay(35) forwards,
commitWork $halfFrame linear delay(40) forwards;
}
#tracks #track15 {
animation-delay: delay(23);
}
#tracks #c3 {
animation-delay: delay(24);
}
#nodes #c3 .bg {
animation: beginWork $halfFrame linear delay(24) forwards,
completeWork $halfFrame linear delay(34) forwards,
commitWork $halfFrame linear delay(40) forwards;
}
#tracks #track16 {
animation-delay: delay(25);
}
#tracks #d3 {
animation-delay: delay(26);
}
#nodes #d3 .bg {
animation: beginWork $halfFrame linear delay(26) forwards,
completeWork $halfFrame linear delay(33) forwards,
commitWork $halfFrame linear delay(40) forwards;
}
#tracks #track17 {
animation-delay: delay(27);
}
#tracks #e3 {
animation-delay: delay(28);
}
#nodes #e3 .bg {
animation: beginWork $halfFrame linear delay(28) forwards,
completeWork $halfFrame linear delay(28.5) forwards,
commitWork $halfFrame linear delay(40) forwards;
}
#effects #e3 {
animation: appear $halfFrame linear delay(28.5) forwards,
disappear $halfFrame linear delay(40) forwards;
}
#tracks #track18 {
animation-delay: delay(29);
}
#tracks #track19 {
animation-delay: delay(30);
}
#tracks #d4 {
animation-delay: delay(31);
}
#nodes #d4 .bg {
animation: beginWork $halfFrame linear delay(31) forwards,
completeWork $halfFrame linear delay(31.5) forwards,
commitWork $halfFrame linear delay(40) forwards;
}
#tracks #track20 {
animation-delay: delay(32);
}
#tracks #track21 {
animation-delay: delay(33);
}
#tracks #track22 {
animation-delay: delay(34);
}
#tracks #track23 {
animation-delay: delay(35);
}
#tracks #track24 {
animation-delay: delay(36);
}
#tracks,
#rails #rail6,
#nodes #e2 {
animation: disappear $frame linear delay(40) forwards;
}
@keyframes outlinePath {
0% {
stroke-dashoffset: 80;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes outlinePathReverse {
0% {
stroke-dashoffset: -60;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes outlineTriangle {
0% {
stroke-dashoffset: 160;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes outlineCircle {
0% {
stroke-dashoffset: 126;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes beginWork {
100% {
fill: #bdeada;
}
}
@keyframes completeWork {
100% {
fill: #cae0f4;
}
}
@keyframes commitWork {
100% {
fill: #ffc793;
}
}
@keyframes appear {
100% {
opacity: 1;
}
}
@keyframes disappear {
100% {
opacity: 0;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.