diff --git a/viz/exercise/SvgPathFirstAreaChartPractice/Graph.tsx b/viz/exercise/SvgPathFirstAreaChartPractice/Graph.tsx
new file mode 100644
index 00000000..603c8306
--- /dev/null
+++ b/viz/exercise/SvgPathFirstAreaChartPractice/Graph.tsx
@@ -0,0 +1,12 @@
+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"
+        stroke="#69b3a2"
+        fillOpacity={0.3}
+      />
+    </svg>
+  );
+};
diff --git a/viz/exercise/SvgPathFirstAreaChartPractice/index.js b/viz/exercise/SvgPathFirstAreaChartPractice/index.js
new file mode 100644
index 00000000..fa564d27
--- /dev/null
+++ b/viz/exercise/SvgPathFirstAreaChartPractice/index.js
@@ -0,0 +1,6 @@
+// File used to render something in codesandbox only
+import ReactDOM from 'react-dom';
+import { Graph } from './Graph';
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<Graph />, rootElement);
diff --git a/viz/exercise/SvgPathFirstAreaChartPractice/package.json b/viz/exercise/SvgPathFirstAreaChartPractice/package.json
new file mode 100644
index 00000000..ac08117a
--- /dev/null
+++ b/viz/exercise/SvgPathFirstAreaChartPractice/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/viz/exercise/SvgPathFirstAreaChartSolution/Graph.tsx b/viz/exercise/SvgPathFirstAreaChartSolution/Graph.tsx
new file mode 100644
index 00000000..b4139d52
--- /dev/null
+++ b/viz/exercise/SvgPathFirstAreaChartSolution/Graph.tsx
@@ -0,0 +1,11 @@
+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"
+        stroke="#69b3a2"
+      />
+    </svg>
+  );
+};
diff --git a/viz/exercise/SvgPathFirstAreaChartSolution/index.js b/viz/exercise/SvgPathFirstAreaChartSolution/index.js
new file mode 100644
index 00000000..fa564d27
--- /dev/null
+++ b/viz/exercise/SvgPathFirstAreaChartSolution/index.js
@@ -0,0 +1,6 @@
+// File used to render something in codesandbox only
+import ReactDOM from 'react-dom';
+import { Graph } from './Graph';
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<Graph />, rootElement);
diff --git a/viz/exercise/SvgPathFirstAreaChartSolution/package.json b/viz/exercise/SvgPathFirstAreaChartSolution/package.json
new file mode 100644
index 00000000..ac08117a
--- /dev/null
+++ b/viz/exercise/SvgPathFirstAreaChartSolution/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}