<svg xmlns="http://www.w3.org/2000/svg" width="960" height="674" viewBox="0 0 960 674" role="img" aria-labelledby="title desc">
<style data-site-theme="n3wth">
  [fill="#6e6e73"] { fill: #6e6e73; }
  [fill="#f5f5f7"] { fill: #f5f5f7; }
  [fill="#1d1d1f"] { fill: #1d1d1f; }
  [stroke="#6e6e73"] { stroke: #6e6e73; }
  [fill="#ffffff"] { fill: #ffffff; }
  [stroke="#0071a4"] { stroke: #054a6b; }
  [stroke="#e8e8ed"] { stroke: #e8e8ed; }
@media (prefers-color-scheme: dark) {
  [fill="#6e6e73"] { fill: #9aa0a8; }
  [fill="#f5f5f7"] { fill: #08090b; }
  [fill="#1d1d1f"] { fill: #f2f3f5; }
  [stroke="#6e6e73"] { stroke: #9aa0a8; }
  [fill="#ffffff"] { fill: #0d0e10; }
  [stroke="#0071a4"] { stroke: #a9e5ff; }
  [stroke="#e8e8ed"] { stroke: #131316; }
}
</style>
<title id="title">Set the conditions; notice the experience</title>
<desc id="desc">The diagram separates three conditions associated with flow—clear goals, challenge matched to perceived skill, and immediate feedback—from the experience of absorbed attention. It notes that conditions support but do not guarantee flow.</desc>
<defs><marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 Z" fill="#6e6e73"/></marker></defs>
<g font-family="system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif">
<rect width="960" height="674" fill="#f5f5f7"/>
<text x="40" y="54" font-size="34" font-weight="600" fill="#1d1d1f" text-anchor="start">Set the conditions; notice the experience</text><text x="40" y="113" font-size="27" font-weight="600" fill="#1d1d1f" text-anchor="start">Conditions to examine</text><text x="592" y="113" font-size="27" font-weight="600" fill="#1d1d1f" text-anchor="start">Experience to notice</text><text x="62" y="183" font-size="28" font-weight="600" fill="#1d1d1f" text-anchor="start">Clear goal</text><text x="62" y="222" font-size="25" font-weight="400" fill="#1d1d1f" text-anchor="start">What am I trying to do now?</text><text x="62" y="316" font-size="28" font-weight="600" fill="#1d1d1f" text-anchor="start">Workable challenge</text><text x="62" y="355" font-size="25" font-weight="400" fill="#1d1d1f" text-anchor="start">Does this stretch my skill?</text><text x="62" y="449" font-size="28" font-weight="600" fill="#1d1d1f" text-anchor="start">Immediate feedback</text><text x="62" y="488" font-size="25" font-weight="400" fill="#1d1d1f" text-anchor="start">Can I tell how I am doing?</text><line x1="475" y1="198" x2="540" y2="327" stroke="#6e6e73" stroke-width="2.5" marker-end="url(#arrow)"/><line x1="475" y1="330" x2="540" y2="330" stroke="#6e6e73" stroke-width="2.5" marker-end="url(#arrow)"/><line x1="475" y1="464" x2="540" y2="333" stroke="#6e6e73" stroke-width="2.5" marker-end="url(#arrow)"/><rect x="562" y="213" width="358" height="247" rx="0" fill="#ffffff" stroke="#0071a4" stroke-width="2.5"/><text x="741" y="269" font-size="28" font-weight="600" fill="#1d1d1f" text-anchor="middle">Absorbed attention</text><text x="741" y="321" font-size="25" font-weight="400" fill="#1d1d1f" text-anchor="middle">Focus stays with the task.</text><text x="741" y="362" font-size="25" font-weight="400" fill="#1d1d1f" text-anchor="middle">The activity feels engaging.</text><text x="741" y="403" font-size="25" font-weight="400" fill="#1d1d1f" text-anchor="middle">Time may feel different.</text><text x="40" y="579" font-size="25" font-weight="600" fill="#1d1d1f" text-anchor="start">Supportive conditions are not a guarantee or a diagnostic test.</text>
<line x1="40" y1="611" x2="920" y2="611" stroke="#e8e8ed" stroke-width="2.5"/><text x="40" y="647" font-size="22" font-weight="400" fill="#6e6e73" text-anchor="start">Conceptual schematic · examples are illustrative</text>
</g>
</svg>
