shape2path

This is a demonstration of shape2path, a little library for converting SVG shapes to SVG paths.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: auto;
        display: table;
      }
      svg {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <svg width="420" height="440"></svg>
    <script src="https://unpkg.com/d3-selection@1.1.0/build/d3-selection.min.js"></script>
    <script src="https://unpkg.com/shape2path@3.0.3/build/shape2path.min.js"></script>
    <script>
      var svg = d3.select("svg");

svg.append("circle")
          .attr("cx", 20)
          .attr("cy", 20)
          .attr("r", 20);

var circle = shape2path.circle()
          .attr("cx", 20)
          .attr("cy", 20)
          .attr("r", 20);

svg.append("path")
          .attr("transform", "translate(45, 0)")
          .attr("d", circle());
        
      svg.append("rect")
          .attr("x", 0)
          .attr("y", 70)
          .attr("width", 40)
          .attr("height", 40);

var rect = shape2path.rect()
          .attr("x", 0)
          .attr("y", 70)
          .attr("width", 40)
          .attr("height", 40);

svg.append("path")
          .attr("transform", "translate(45, 0)")
          .attr("d", rect());

svg.append("rect")  
          .attr("x", 0)
          .attr("y", 120)
          .attr("width", 200)
          .attr("height", 200)
          .attr("rx", 20)
          .attr("ry", 10);

var roundedRect = shape2path.rect()
          .attr("x", 0)
          .attr("y", 120)
          .attr("width", 200)
          .attr("height", 200)
          .attr("rx", 20)
          .attr("ry", 10);

svg.append("path")
          .attr("transform", "translate(220, 0)")
          .attr("d", roundedRect());

svg.append("rect")
          .attr("x", 0)
          .attr("y", 340)
          .attr("width", 100)
          .attr("height", 100)
          .attr("rx", 15);

var roundedRect2 = shape2path.rect()
          .attr("x", 0)
          .attr("y", 340)
          .attr("width", 100)
          .attr("height", 100)
          .attr("rx", 15);

svg.append("path")
          .attr("transform", "translate(120, 0)")
          .attr("d", roundedRect2());

svg.append("ellipse")
          .attr("cx", 150)
          .attr("cy", 25)
          .attr("rx", 50)
          .attr("ry", 25);

var ellipse = shape2path.ellipse()
          .attr("cx", 150)
          .attr("cy", 25)
          .attr("rx", 50)
          .attr("ry", 25);

svg.append("path")
          .attr("transform", "translate(0, 55)")
          .attr("d", ellipse());

svg.append("line")
          .attr("x1", 220)
          .attr("x2", 300)
          .attr("y1", 100)
          .attr("y2", 0)
          .style("stroke", "black");

var line = shape2path.line()
          .attr("x1", 220)
          .attr("x2", 300)
          .attr("y1", 100)
          .attr("y2", 0);

svg.append("path")
          .attr("transform", "translate(0, 10)")
          .attr("d", line())
          .style("stroke", "black");

svg.append("polygon")
          .attr("fill", "none")
          .attr("stroke", "black")
          .attr("points", "270,340 310,360 310,400 270,420 230,400 230,360");

var polygon = shape2path.polygon()
          .attr("points", "270,340 310,360 310,400 270,420 230,400 230,360");

svg.append("path")
          .attr("fill", "none")
          .attr("stroke", "black")
          .attr("transform", "translate(100, 0)")
          .attr("d", polygon());

svg.append("polyline")
          .attr("fill", "none")
          .attr("stroke", "black")
          .attr("points", "270,100 290,60 320,80 350,20");

var polyline = shape2path.polyline()
          .attr("points", "270,100 290,60 320,80 350,20");

svg.append("path")
          .attr("transform", "translate(69, 0)")
          .attr("fill", "none")
          .attr("stroke", "black")
          .attr("d", polyline());

</script>
  </body>
</html>

https://unpkg.com/d3-selection@1.1.0/build/d3-selection.min.js

https://unpkg.com/shape2path@3.0.3/build/shape2path.min.js