Update svg_editable.html

uclab-potsdam · Dec 13, 2024 · de30c7a · de30c7a
1 parent fe8ecfb
commit de30c7a
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/experiments/Lisa/svg_editable.html b/experiments/Lisa/svg_editable.html
@@ -29,17 +29,24 @@
         if (event.target.tagName === 'circle') return; // Avoid creating circles on existing ones
         createCircle(event.clientX, event.clientY);
     });
+    //Generate random size and color for the circle
+      const radius = Math.random() * 50 + 10; // Size between 10 and 60
+      const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
 
     // areate 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', 'red');
+        circle.setAttribute('fill', 'randomColor'); // Set random color
         circle.setAttribute('cursor', 'pointer');
         svg.appendChild(circle);
 
+    // Generate a random color in the RGB format
+    const randomColor = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
+    circle.setAttribute('fill', randomColor); // Apply random color
+
         // Add drag behavior
         circle.addEventListener('mousedown', (event) => {
             selectedCircle = circle;