APPS/glidr-content.git - git.mnsoft.org

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 350" width="500" height="350" style="background:white; font-family: Arial, sans-serif;">

  <defs>
    <marker id="arrowAxis" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
      <polygon points="0,0 10,3.5 0,7" fill="black"/>
    </marker>
  </defs>

  <!-- Axes -->
  <!-- Y axis (Performance) -->
  <line x1="70" y1="290" x2="70" y2="30" stroke="black" stroke-width="2" marker-end="url(#arrowAxis)"/>
  <!-- X axis (Arousal) -->
  <line x1="70" y1="290" x2="460" y2="290" stroke="black" stroke-width="2" marker-end="url(#arrowAxis)"/>

  <!-- Axis labels -->
  <text x="250" y="325" text-anchor="middle" font-size="15" font-weight="bold" fill="black">A (Arousal / Stress)</text>
  <!-- Y-axis label (rotated) -->
  <text x="22" y="165" text-anchor="middle" font-size="15" font-weight="bold" fill="black"
        transform="rotate(-90, 22, 165)">P (Performance)</text>

  <!-- Inverted-U curve
       X range: 70 to 450 (arousal: low to high)
       Y range: 290 (low) to 50 (high performance)
       Peak at arousal midpoint ~x=260, y=55
       A: (90, 270)  low arousal, low performance
       B: (260, 55)  peak
       C: (360, 140) high arousal, declining
       D: (430, 270) very high, very low

       Bezier: from A(90,270) through B(260,55) to D(430,270)
       Control points to create smooth inverted-U:
       CP1: (155, 55) pulling curve up
       CP2: (355, 55) holding it up then falling
  -->
  <path d="M 90,270 C 155,55 355,55 430,270"
        fill="none" stroke="#2255aa" stroke-width="3"/>

  <!-- Shaded zone around peak (optimal performance zone) -->
  <!-- Light band between x=200 and x=320 -->
  <path d="M 200,290 L 200,78 C 225,60 295,60 320,78 L 320,290 Z"
        fill="#e8f0ff" stroke="none" opacity="0.5"/>

  <!-- Point A: low arousal, low performance -->
  <!-- On curve at x=90: y=270 -->
  <circle cx="90" cy="270" r="7" fill="#c00" stroke="black" stroke-width="1.5"/>
  <text x="70" y="265" text-anchor="end" font-size="14" font-weight="bold" fill="#c00">A</text>
  <text x="55" y="248" text-anchor="middle" font-size="11" fill="#444">Low arousal,</text>
  <text x="55" y="261" text-anchor="middle" font-size="11" fill="#444">low performance</text>

  <!-- Point B: optimal, peak performance -->
  <!-- On curve at x=260, peak: y ~ 55 + small deviation from bezier calc -->
  <!-- At t=0.5 for cubic bezier A(90,270) CP1(155,55) CP2(355,55) D(430,270):
       x = (1-t)^3*90 + 3(1-t)^2*t*155 + 3(1-t)*t^2*355 + t^3*430
         = 0.125*90 + 0.375*155 + 0.375*355 + 0.125*430
         = 11.25 + 58.125 + 133.125 + 53.75 = 256.25
       y = 0.125*270 + 0.375*55 + 0.375*55 + 0.125*270
         = 33.75 + 20.625 + 20.625 + 33.75 = 108.75
       Hmm, mid-bezier y=109, not 55. The peak is NOT at t=0.5 for this bezier.
       The actual peak (minimum y) is at the top of the curve.
       Since CP1.y = CP2.y = 55, and A.y=D.y=270, the peak of the curve is AT y=55.
       The x-midpoint of control points: (155+355)/2 = 255. So peak is around x=255, y close to 55. -->
  <!-- Let's just use x=258, y=57 for point B (approximately correct) -->
  <circle cx="258" cy="62" r="7" fill="#007700" stroke="black" stroke-width="1.5"/>
  <text x="258" y="50" text-anchor="middle" font-size="14" font-weight="bold" fill="#007700">B</text>
  <text x="258" y="35" text-anchor="middle" font-size="12" fill="#007700" font-weight="bold">Optimal</text>
  <text x="258" y="18" text-anchor="middle" font-size="11" fill="#444">Peak performance</text>

  <!-- Point C: high arousal, declining -->
  <!-- Approximate on curve: x=360 -->
  <!-- t such that x=360:
       90(1-t)^3 + 3*155(1-t)^2*t + 3*355(1-t)*t^2 + 430*t^3 = 360
       Rough estimate: t~0.73 gives x~360
       y at t=0.73: 0.0219*270 + 3*0.0729*0.73*55 + 3*0.27*0.5329*55 + 0.389*270
         = 5.9 + 8.8 + 23.8 + 105 = 143.5 ≈ 144 -->
  <circle cx="362" cy="144" r="7" fill="#e87000" stroke="black" stroke-width="1.5"/>
  <text x="375" y="140" text-anchor="start" font-size="14" font-weight="bold" fill="#e87000">C</text>
  <text x="390" y="125" text-anchor="middle" font-size="11" fill="#444">High arousal,</text>
  <text x="390" y="138" text-anchor="middle" font-size="11" fill="#444">declining</text>

  <!-- Point D: very high arousal, very low performance -->
  <circle cx="430" cy="270" r="7" fill="#c00" stroke="black" stroke-width="1.5"/>
  <text x="445" y="268" text-anchor="start" font-size="14" font-weight="bold" fill="#c00">D</text>
  <text x="445" y="285" text-anchor="start" font-size="11" fill="#444">Very low</text>
  <text x="445" y="298" text-anchor="start" font-size="11" fill="#444">performance</text>

  <!-- Axis tick labels -->
  <text x="65" y="295" text-anchor="end" font-size="11" fill="#666">Low</text>
  <text x="455" y="295" text-anchor="end" font-size="11" fill="#666">High</text>
  <text x="65" y="295" text-anchor="end" font-size="11" fill="#666">Low</text>

  <!-- Y axis: Low at bottom, High at top -->
  <text x="65" y="290" text-anchor="end" font-size="11" fill="#666">Low</text>
  <text x="65" y="50" text-anchor="end" font-size="11" fill="#666">High</text>

  <!-- Optimal zone label -->
  <text x="260" y="215" text-anchor="middle" font-size="11" fill="#2255aa" font-style="italic">Optimal zone</text>

  <!-- Title -->
  <text x="250" y="345" text-anchor="middle" font-size="14" font-weight="bold" fill="black">Yerkes-Dodson Curve</text>

</svg>