JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  
<svg id="svg-container" width="100%" height="100%"></svg>

CSS

svg {
      border: 1px solid #ccc;
      height:900px;
    }

JavaScript

function createCircle(x, y, radius, color) {
      const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      circle.setAttribute("cx", x);
      circle.setAttribute("cy", y);
      circle.setAttribute("r", radius);
      circle.setAttribute("fill", color);
      return circle;
    }

    function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

    function getRandomRadius(min, max) {
      return Math.random() * (max - min) + min;
    }

    function getRandomSpeed() {
      return (Math.random() - 0.5) * 2;
    }

    function createLine(x1, y1, x2, y2) {
      const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
      line.setAttribute("x1", x1);
      line.setAttribute("y1", y1);
      line.setAttribute("x2", x2);
      line.setAttribute("y2", y2);
      line.setAttribute("stroke", "gray");
      return line;
    }

    function calculateDistance(x1, y1, x2, y2) {
      return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
    }

    function checkCircleCollision(circle1, circle2) {
      const x1 = parseFloat(circle1.getAttribute("cx"));
      const y1 = parseFloat(circle1.getAttribute("cy"));
      const r1 = parseFloat(circle1.getAttribute("r"));

      const x2 = parseFloat(circle2.getAttribute("cx"));
      const y2 = parseFloat(circle2.getAttribute("cy"));
      const r2 = parseFloat(circle2.getAttribute("r"));

      const distance = calculateDistance(x1, y1, x2, y2);
      return distance < r1 + r2;
    }

    function handleCollision(circle1, circle2) {
      const x1 = parseFloat(circle1.getAttribute("cx"));
      const y1 = parseFloat(circle1.getAttribute("cy"));
      const dx1 = parseFloat(circle1.getAttribute("data-dx"));
      const dy1 = parseFloat(circle1.getAttribute("data-dy"));

      const x2 =...