JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quadratic Bezier Curve with JS</title>
</head>
<body>
  <script>
    // Create an SVG element
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("width", "400");
    svg.setAttribute("height", "400");

    // Create a path element for the quadratic Bezier curve
    var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute("d", "M 50 200 Q 200 50 350 200");
    path.setAttribute("fill", "none");
    path.setAttribute("stroke", "black");

    // Append the path element to the SVG element
    svg.appendChild(path);

    // Append the SVG element to the body
    document.body.appendChild(svg);
  </script>
</body>
</html>