From f8f80ea89bec43f5b3e4cdc68facde2ec56a7f9f Mon Sep 17 00:00:00 2001
From: Yan Holtz <yan.holtz.data@gmail.com>
Date: Thu, 8 Aug 2024 14:09:23 +0200
Subject: [PATCH] u

---
 pages/course/svg/path-element.tsx             | 44 +++++++++++++++++++
 .../SvgPathFirstAreaChartPractice/Graph.tsx   |  5 +--
 .../SvgPathFirstAreaChartSolution/Graph.tsx   |  5 ++-
 3 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/pages/course/svg/path-element.tsx b/pages/course/svg/path-element.tsx
index a4262054..49b772d1 100644
--- a/pages/course/svg/path-element.tsx
+++ b/pages/course/svg/path-element.tsx
@@ -182,6 +182,50 @@ export default function Home() {
             practiceSandbox: 'exercise/SvgPathFirstLineChartPractice',
             solutionSandbox: 'exercise/SvgPathFirstLineChartSolution',
           },
+
+          {
+            title: (
+              <span>
+                Close a path with <code>Z</code> (and build your first area
+                chart)
+              </span>
+            ),
+            whyItMatters: (
+              <>
+                <p>
+                  The <code>&lt;path&gt;</code> element can be used to draw
+                  extended lines or create closed shapes.
+                </p>
+                <p>
+                  To close a shape, add <code>Z</code> at the end of the{' '}
+                  <code>d</code> attribute and use the <code>fill</code>{' '}
+                  property to apply a color.
+                </p>
+              </>
+            ),
+            toDo: (
+              <ul>
+                <li>
+                  Modify the path to start at the bottom-left corner of the SVG
+                  area.
+                </li>
+                <li>
+                  Adjust the path to end at the bottom-right corner of the SVG
+                  area.
+                </li>
+                <li>
+                  Add a <code>Z</code> at the end of the <code>d</code>{' '}
+                  attribute to close the shape.
+                </li>
+                <li>
+                  Update the <code>fill</code> property to apply a color to the
+                  shape.
+                </li>
+              </ul>
+            ),
+            practiceSandbox: 'exercise/SvgPathFirstAreaChartPractice',
+            solutionSandbox: 'exercise/SvgPathFirstAreaChartSolution',
+          },
         ]}
       />
     </LayoutCourse>
diff --git a/viz/exercise/SvgPathFirstAreaChartPractice/Graph.tsx b/viz/exercise/SvgPathFirstAreaChartPractice/Graph.tsx
index 603c8306..1d9985e7 100644
--- a/viz/exercise/SvgPathFirstAreaChartPractice/Graph.tsx
+++ b/viz/exercise/SvgPathFirstAreaChartPractice/Graph.tsx
@@ -2,10 +2,9 @@ export const Graph = () => {
   return (
     <svg width={500} height={300} style={{ overflow: 'visible' }}>
       <path
-        d="M0 300 L0 40 L50 70 L100 150 L150 150 L200 200 L250 50 L300 90 L300 300 Z"
-        fill="#69b3a2"
+        d="M0 40 L50 70 L100 150 L150 150 L200 200 L250 50 L300 90" // Transform this to make an area chart!
+        fill="none"
         stroke="#69b3a2"
-        fillOpacity={0.3}
       />
     </svg>
   );
diff --git a/viz/exercise/SvgPathFirstAreaChartSolution/Graph.tsx b/viz/exercise/SvgPathFirstAreaChartSolution/Graph.tsx
index b4139d52..603c8306 100644
--- a/viz/exercise/SvgPathFirstAreaChartSolution/Graph.tsx
+++ b/viz/exercise/SvgPathFirstAreaChartSolution/Graph.tsx
@@ -2,9 +2,10 @@ export const Graph = () => {
   return (
     <svg width={500} height={300} style={{ overflow: 'visible' }}>
       <path
-        d="M0 40 L50 70 L100 150 L150 150 L200 200 L250 50 L300 90"
-        fill="none"
+        d="M0 300 L0 40 L50 70 L100 150 L150 150 L200 200 L250 50 L300 90 L300 300 Z"
+        fill="#69b3a2"
         stroke="#69b3a2"
+        fillOpacity={0.3}
       />
     </svg>
   );