diff --git a/examples/graphics/canvas_animated.html b/examples/graphics/canvas_animated.html
index ca28f3a..1d7989e 100644
--- a/examples/graphics/canvas_animated.html
+++ b/examples/graphics/canvas_animated.html
@@ -24,7 +24,7 @@
 
     // click to add circle
     canvas.addEventListener('click', (event) => {
-        addCircle(event.clientX, event.clientY);
+        addCircle(event.clientX, event.clientY);        
     });
 
     // set initial properties of new circle
diff --git a/experiments/gioia/6_svg_editable.html b/experiments/gioia/6_svg_editable.html
new file mode 100644
index 0000000..feaa4da
--- /dev/null
+++ b/experiments/gioia/6_svg_editable.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Editable SVG - Graphics - Interactive Information</title>
+<style>
+body { 
+    margin: 0; padding: 0;
+}
+
+svg {
+    width: 100vw;
+    height: 100vh;
+}
+</style>
+</head>
+<body>
+
+<svg xmlns="http://www.w3.org/2000/svg"></svg>
+
+<script>
+    const svg = document.querySelector('svg');
+
+    let selectedShape = null; // shape being dragged or resized
+    let offsetX, offsetY; // offsets for dragging
+
+    svg.addEventListener('click', (event) => {
+        if (event.target.tagName === 'circle' || event.target.tagName === 'rect' || event.target.tagName === 'polygon') return; // Avoid creating shapes on existing ones
+        createShape(event.clientX, event.clientY);
+    });
+
+    function createShape(x, y) {
+        const shapeType = ['circle', 'rect', 'triangle'][Math.floor(Math.random() * 3)];
+        
+        switch (shapeType) {
+            case 'circle':
+                createCircle(x, y);
+                break;
+            case 'rect':
+                createRectangle(x, y);
+                break;
+            case 'triangle':
+                createTriangle(x, y);
+                break;
+        }
+    }
+
+    function createCircle(x, y) {
+        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        circle.setAttribute('cx', x);
+        circle.setAttribute('cy', y);
+        circle.setAttribute('r', 10 + Math.random() * 100);
+        circle.setAttribute('fill', getRandomColor());
+        circle.setAttribute('cursor', 'pointer');
+        svg.appendChild(circle);
+
+        addDragBehavior(circle);
+    }
+
+    function createRectangle(x, y) {
+        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        const width = 20 + Math.random() * 150;
+        const height = 20 + Math.random() * 150;
+        rect.setAttribute('x', x - width / 2);
+        rect.setAttribute('y', y - height / 2);
+        rect.setAttribute('width', width);
+        rect.setAttribute('height', height);
+        rect.setAttribute('fill', getRandomColor());
+        rect.setAttribute('cursor', 'pointer');
+        svg.appendChild(rect);
+
+        addDragBehavior(rect);
+    }
+
+    function createTriangle(x, y) {
+        const size = 30 + Math.random() * 120;
+        const points = [
+            `${x},${y - size / 2}`,
+            `${x - size / 2},${y + size / 2}`,
+            `${x + size / 2},${y + size / 2}`
+        ].join(' ');
+        const triangle = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+        triangle.setAttribute('points', points);
+        triangle.setAttribute('fill', getRandomColor());
+        triangle.setAttribute('cursor', 'pointer');
+        svg.appendChild(triangle);
+
+        addDragBehavior(triangle);
+    }
+
+    function addDragBehavior(shape) {
+        shape.addEventListener('mousedown', (event) => {
+            selectedShape = shape;
+            if (shape.tagName === 'circle') {
+                offsetX = event.clientX - parseFloat(shape.getAttribute('cx'));
+                offsetY = event.clientY - parseFloat(shape.getAttribute('cy'));
+            } else if (shape.tagName === 'rect') {
+                offsetX = event.clientX - parseFloat(shape.getAttribute('x'));
+                offsetY = event.clientY - parseFloat(shape.getAttribute('y'));
+            } else if (shape.tagName === 'polygon') {
+                offsetX = event.clientX;
+                offsetY = event.clientY;
+            }
+        });
+    }
+
+    svg.addEventListener('mousemove', (event) => {
+        if (!selectedShape) return;
+
+        if (selectedShape.tagName === 'circle') {
+            const x = event.clientX - offsetX;
+            const y = event.clientY - offsetY;
+            selectedShape.setAttribute('cx', x);
+            selectedShape.setAttribute('cy', y);
+        } else if (selectedShape.tagName === 'rect') {
+            const x = event.clientX - offsetX;
+            const y = event.clientY - offsetY;
+            selectedShape.setAttribute('x', x);
+            selectedShape.setAttribute('y', y);
+        } else if (selectedShape.tagName === 'polygon') {
+            const dx = event.clientX - offsetX;
+            const dy = event.clientY - offsetY;
+            const points = selectedShape.getAttribute('points').split(' ').map(point => {
+                const [px, py] = point.split(',').map(Number);
+                return `${px + dx},${py + dy}`;
+            }).join(' ');
+            selectedShape.setAttribute('points', points);
+            offsetX = event.clientX;
+            offsetY = event.clientY;
+        }
+    });
+
+    svg.addEventListener('mouseup', () => { selectedShape = null; });
+    svg.addEventListener('mouseleave', () => { selectedShape = null; });
+
+    function getRandomColor() {
+        const letters = '0123456789ABCDEF';
+        let color = '#';
+        for (let i = 0; i < 6; i++) {
+            color += letters[Math.floor(Math.random() * 16)];
+        }
+        return color;
+    }
+</script>
+</body>
+</html>
diff --git a/experiments/gioia/canvas.html b/experiments/gioia/canvas.html
new file mode 100644
index 0000000..b8d10a7
--- /dev/null
+++ b/experiments/gioia/canvas.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Canvas - Graphics - Interactive Information</title>
+<style>
+body { 
+    margin: 0; padding: 0;
+}
+</style>
+</head>
+<body>
+
+<canvas></canvas>
+
+<script>
+const canvas = document.querySelector('canvas');
+const context = canvas.getContext('2d');
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+// click to draw marks
+canvas.addEventListener('click', (event) => {
+    drawCircle(event.clientX, event.clientY);
+});
+
+// draw circle at a given position
+function drawCircle(x, y) {
+    context.beginPath();
+    context.arc(x, y, 10+Math.random()*100, 0, 2 * Math.PI);
+    context.fillStyle = "black"
+    context.fill();
+}
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/experiments/gregor/5_scroll.html b/experiments/gregor/5_scroll.html
index 6774ddd..24bf4fe 100644
--- a/experiments/gregor/5_scroll.html
+++ b/experiments/gregor/5_scroll.html
@@ -12,6 +12,9 @@
     height: 100vh;
     background-color: black;
     font-family: "Just Me Again Down Here";
+    display: flex;
+    flex-direction: row;
+    overflow-x: scroll;
 }
 
 .video-container {
@@ -61,6 +64,7 @@
 
 h1 { font-size: 5em; top: 20vh; }
 h2 { font-size: 4em; top: 30vh; }
+
 </style>
 </head>
 <body>
diff --git a/experiments/gregor/6_graphics.html b/experiments/gregor/6_graphics.html
new file mode 100644
index 0000000..a357ca2
--- /dev/null
+++ b/experiments/gregor/6_graphics.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Layered Circles and Squares</title>
+<style>
+body { 
+    margin: 0; padding: 0;
+}
+
+svg {
+    width: 100vw;
+    height: 100vh;
+}
+</style>
+</head>
+<body>
+
+<svg xmlns="http://www.w3.org/2000/svg"></svg>
+
+<script>
+
+const svg = document.querySelector('svg');
+var toggle = true;
+
+// create random hex code
+function RandomColor() {
+  var hex = '0123456789ABCDEF';
+  var color = '#';
+  for (var i = 0; i < 6; i++) {
+    color += hex[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+// add 8 layered circles and squares alternately at click location
+svg.addEventListener('click', (event) => {
+    
+    //toggle between circles and squares
+    if (toggle === true) {
+        for (var i = 0; i < 8; i++) {
+            createCircle(event.clientX, event.clientY);
+        }
+    toggle = false;
+    } else {
+        for (var i = 0; i < 8; i++) {
+            createSquare(event.clientX, event.clientY);
+        }
+        toggle = true; 
+    }
+});
+
+// create a new circle
+function createCircle(x, y) {
+    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    circle.setAttribute('cx', x);
+    circle.setAttribute('cy', y);
+    circle.setAttribute('r', 10+Math.random()*100, 0, 2 * Math.PI);
+    circle.setAttribute('fill', RandomColor());        
+    svg.appendChild(circle);
+}
+
+//create a new square
+function createSquare(x, y) {
+    const square = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    const size = 10+Math.random()*100; //create random size to set width AND height
+    square.setAttribute('x', x - size / 2); //center click location
+    square.setAttribute('y', y - size / 2); //center click location
+    square.setAttribute('height', size);
+    square.setAttribute('width', size);
+    square.setAttribute('fill', RandomColor());        
+    svg.appendChild(square);
+}
+
+
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/experiments/marine/6_graphic.html b/experiments/marine/6_graphic.html
new file mode 100644
index 0000000..8ee3250
--- /dev/null
+++ b/experiments/marine/6_graphic.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Canvas - Graphics - Interactive Information</title>
+<style>
+    body {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: center; /* Centre horizontalement */
+        align-items: center;    /* Centre verticalement */
+        height: 100vh;          /* Hauteur de la fenêtre */
+        background-color: #f0f0f0; /* Fond de la page */
+    }
+
+    canvas {
+        background-color: aqua;
+        border: 3px solid black;
+        border-radius: 8px;
+    }
+
+
+</style>
+</head>
+<body>
+
+    <div class= canva-wrapper> 
+        <canvas></canvas>
+    </div>
+
+<script>
+const canvas = document.querySelector('canvas');
+const context = canvas.getContext('2d');
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+let isDrawing = false; // Indique si la souris est en train de dessiner
+
+// Écouteurs pour gérer le clic prolongé
+canvas.addEventListener('mousedown', (event) => {
+    isDrawing = true;
+    drawCircle(event.clientX, event.clientY); // Dessine immédiatement au point de départ
+});
+
+canvas.addEventListener('mousemove', (event) => {
+    if (isDrawing) {
+        drawCircle(event.clientX, event.clientY); // Dessine des cercles pendant le déplacement
+    }
+});
+
+canvas.addEventListener('mouseup', () => {
+    isDrawing = false; // Arrête de dessiner quand le clic est relâché
+});
+
+// click to draw marks
+canvas.addEventListener('click', (event) => {
+    drawCircle(event.clientX, event.clientY);
+});
+
+// draw circle at a given position
+function drawCircle(x, y) {
+    const circleColor= Math.floor(Math.random()* 360);
+    context.beginPath();
+    context.arc(x, y, 5, 0, 2 * Math.PI);
+    context.fillStyle = `hsl(${circleColor}, 100%, 50%)` ;
+    context.fill();
+}
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/experiments/marine/6_media.html b/experiments/marine/6_media.html
deleted file mode 100644
index ead9476..0000000
--- a/experiments/marine/6_media.html
+++ /dev/null
@@ -1,120 +0,0 @@
-<!DOCTYPE html> 
-<html lang="en"> 
-<head> 
-<meta charset="UTF-8"> 
-<title>Video - Media - Interactive Information</title> 
-
-
-
-
-
-
-<style> 
-
-body {  
-background-color: black; 
-padding: 0; margin: 0; 
-display: flex; 
-justify-content: center;  
-align-items: center;    
-height: 100vh;     
-} 
-
-.main-container {
-    display: flex; /* Centrer la vidéo si nécessaire */
-    flex-direction: column;
-}
-/* Le conteneur occupe toute la largeur et hauteur possibles */
-.video-container {
-    width: 100vw; /* 100% de la largeur de la fenêtre */
-    height: auto; /* 100% de la hauteur de la fenêtre */
-}
-
-/* La vidéo s'adapte au conteneur tout en respectant ses proportions */
-.video-container video {
-    width: 100%; /* 100% de la largeur du conteneur */
-    height: auto; /* Ajuste la hauteur pour respecter les proportions */
-    max-height: 100%; /* Empêche la vidéo de dépasser la hauteur du conteneur */
-}
-
-.button-container {
-    align-items: center;
-}
-
-button{
-    color: aliceblue;
-    background-color: rgba(252, 147, 0, 0.715);
-    border-radius: 50%;
-    padding: 10px 20px;
-    margin: 10px 10px 10px; /* Espace au-dessus et en-dessous du titre */
-    font-size: 1.5rem; /* Taille du texte */
-    text-align: left; /* Centre le texte */
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    transition: 0.2s;
-    text-align: center;
-}
-
-button:hover {
-    font-weight:bold;
-    scale: 1.1;
-}
-
-
-</style> 
-
-</head> 
-
-
-
-
-
-
-<body> 
-
-<div class=" main-container">
-    <div class=" video-container">
-        <video id="video" controls poster="assets/miniature.jpg"> 
-        <source src="https://fhpcloud.fh-potsdam.de/s/cQCaBpTMfxfEgFJ/download/video.mp4" type="video/mp4"> 
-        <track kind="subtitles" src="subtitles.vtt" srclang="en" default> 
-            Download video as <a href="https://fhpcloud.fh-potsdam.de/s/cQCaBpTMfxfEgFJ/download/video.mp4">MP4</a>. 
-        </video> 
-        
-    </div>
-    <div class="button-container">
-        <button onclick="jumpToTime(89)">CHORUS</button>
-    </div>
-</div>
-    
-
-    <script>
-        // Fonction pour avancer la vidéo jusqu'à un certain timecode
-        function jumpToTime(timeInSeconds) {
-            var video = document.getElementById('video');
-            video.currentTime = timeInSeconds; // Définit la position de lecture à 'timeInSeconds'
-            video.play(); // Optionnellement, lancer la lecture après avoir changé la position
-        }
-    </script>
-
-
-
-
-
-
-
-<script> 
-const video = document.getElementById('video'); 
-document.addEventListener('keydown', (event) => { 
-if (event.code === 'Space') { 
-event.preventDefault(); // this prevents scrolling when spacebar press 
-if (video.paused) video.play(); 
-else video.pause();         
-    } 
-}); 
-</script>
-
-
-
-
-
-</body>
-</html>
\ No newline at end of file
diff --git a/experiments/marine/7_graphic.html b/experiments/marine/7_graphic.html
new file mode 100644
index 0000000..5371747
--- /dev/null
+++ b/experiments/marine/7_graphic.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Canvas - Graphics - Interactive Information</title>
+<style>
+body { 
+    margin: 0; padding: 0;
+    background-color: aliceblue;
+}
+
+</style>
+</head>
+<body>
+
+    <div class= canva-wrapper> 
+        <canvas></canvas>
+    </div>
+
+<script>
+const canvas = document.querySelector('canvas');
+const context = canvas.getContext('2d');
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+let isDrawing = false; // Indique si la souris est en train de dessiner
+
+// Écouteurs pour gérer le clic prolongé
+canvas.addEventListener('mousedown', (event) => {
+    isDrawing = true;
+    drawCircle(event.clientX, event.clientY); // Dessine immédiatement au point de départ
+});
+
+canvas.addEventListener('mousemove', (event) => {
+    if (isDrawing) {
+        drawCircle(event.clientX, event.clientY); // Dessine des cercles pendant le déplacement
+    }
+});
+
+canvas.addEventListener('mouseup', () => {
+    isDrawing = false; // Arrête de dessiner quand le clic est relâché
+});
+
+// click to draw marks
+canvas.addEventListener('click', (event) => {
+    drawCircle(event.clientX, event.clientY);
+});
+
+// draw circle at a given position
+function drawCircle(x, y) {
+    const circleColor= Math.floor(Math.random()* 360);
+    context.beginPath();
+    context.arc(x, y, 5, 0, 2 * Math.PI);
+    context.fillStyle = `hsl(${circleColor}, 100%, 50%)` ;
+    context.fill();
+}
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/experiments/svenja/canvas_animated.html b/experiments/svenja/SHOW_THIS_ONE_updated_canvas_animated.html
similarity index 100%
rename from experiments/svenja/canvas_animated.html
rename to experiments/svenja/SHOW_THIS_ONE_updated_canvas_animated.html
diff --git a/experiments/valentina/6_graphics.html b/experiments/valentina/6_graphics.html
index 321bd78..243b1f8 100644
--- a/experiments/valentina/6_graphics.html
+++ b/experiments/valentina/6_graphics.html
@@ -51,6 +51,21 @@
     border: 4px solid black;
 }
 
+.reset-button {
+    margin: 20px;
+    padding: 10px 20px;
+    background-color: #003975;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+.reset-button:hover {
+    background-color: #002144;
+}
+
 .main {
     flex: 1; /* Take remaining space */
     display: flex;
@@ -79,6 +94,7 @@
     <div class="color-button" style="background-color: rgba(0, 255, 0, 0.5);" data-color="rgba(0, 255, 0, 0.5)"></div>
     <div class="color-button" style="background-color: rgba(255, 255, 0, 0.5);" data-color="rgba(255, 255, 0, 0.5)"></div>
     <div class="color-button" style="background-color: rgba(128, 0, 128, 0.5);" data-color="rgba(128, 0, 128, 0.5)"></div>
+    <button class="reset-button">Reset</button>
 </div>
 
 <div class="main">
@@ -92,6 +108,7 @@
 <script>
     const svg = document.querySelector('svg');
     const colorButtons = document.querySelectorAll('.color-button');
+    const resetButton = document.querySelector('.reset-button');
     let points = [];
     let currentPath = null;
     const pointRadius = 5;
@@ -183,10 +200,17 @@
         ).join(' ');
         currentPath.setAttribute('d', d);
     }
+
+    // Reset button event listener
+    resetButton.addEventListener('click', () => {
+        // Clear all elements in the SVG
+        svg.innerHTML = '';
+        // Reset variables
+        points = [];
+        currentPath = null;
+        firstPointElement = null;
+    });
 </script>
 
 </body>
 </html>
-
-
-
diff --git a/index.html b/index.html
index faccad0..240256c 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@ <h2>🖥️ Examples</h2>
     <li>Layouts: <a href="examples/layouts/#normal.css">normal flow</a>, <a href="examples/layouts/#float.css">floats</a>, <a href="examples/layouts/#position.css">position</a>, <a href="examples/layouts/#flexbox.css">flexbox</a>, <a href="examples/layouts/#grid.css">grid</a>, <a href="examples/layouts/#mediaqueries.css">media queries</a>
     <li>Scrollytelling: <a href="examples/scrollytelling/overflow.html">overflow</a>, <a href="examples/scrollytelling/progress.html">progress</a>, <a href="examples/scrollytelling/parallax.html">parallax</a>, <a href="examples/scrollytelling/reveal.html">reveal</a>,  <a href="examples/scrollytelling/illu.html">illustration</a>
     <li>Media: <a href="examples/media/audio.html">audio</a>, <a href="examples/media/video.html">video</a>, <a href="examples/media/embed.html">embed</a>
-    <li>Graphics: <a href="examples/graphics/canvas.html">canvas</a>, <a href="examples/graphics/canvas_animated.html">animated canvas</a>, <a href="examples/graphics/svg.html">SVG</a>, <a href="examples/graphics/svg_editable.html">editable SVG</a>, <a href="examples/graphics/svg_triangles.html">SVG triangles</a>, 
+    <li>Graphics: <a href="examples/graphics/canvas.html">canvas</a>, <a href="examples/graphics/canvas_animated.html">animated canvas</a>, <a href="examples/graphics/svg.html">SVG</a>, <a href="examples/graphics/svg_editable.html">editable SVG</a>, <a href="examples/graphics/svg_triangles.html">SVG triangles</a>
 </ul>
 
 
