u

holtzy · Aug 8, 2024 · f8f80ea · f8f80ea
1 parent 9a569f6
commit f8f80ea
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>
   );