Below you can see the code which generates a path (rect with right rounded corners). What should I change to prepare the same or generic function to have possibility to round also left corners on demand ?

function rightRoundedRect(x, y, width, height, radius) {
  return "M" + x + "," + y
       + "h" + (width - radius)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - 2 * radius)
       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
       + "h" + (radius - width)
       + "z";
}

Link to founded CodePen example with visualization:

Below you can see the code which generates a path (rect with right rounded corners). What should I change to prepare the same or generic function to have possibility to round also left corners on demand ?

function rightRoundedRect(x, y, width, height, radius) {
  return "M" + x + "," + y
       + "h" + (width - radius)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - 2 * radius)
       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
       + "h" + (radius - width)
       + "z";
}

Link to founded CodePen example with visualization: https://codepen.io/ajv/pen/wKdrWb

• javascript
• d3.js
• svg
• html5-canvas

• 3 scale it by (-1, 1) would be the least work option. – Robert Longson Commented Aug 25, 2017 at 14:39
• @Robert Longson that would throw an error because you give a negative number to scale() – Trash Can Commented Aug 25, 2017 at 14:44
• 4 @dummy you should try it and see before adding an incorrect ment. – Robert Longson Commented Aug 25, 2017 at 14:49
• @Dummy please take a screenshot of that error, I really want to see that magic. – Gerardo Furtado Commented Aug 25, 2017 at 14:59
• 1 it will flip the shape about the y axis, you might need a translate to put it where you want it. – Robert Longson Commented Aug 25, 2017 at 15:13

2 Answers 2

An equivalent function for doing the left hand side looks like this:

function leftRoundedRect(x, y, width, height, radius) {
  return "M" + (x + radius) + "," + y
       + "h" + (width - radius)
       + "v" + height
       + "h" + (radius - width)
       + "a" + radius + "," + radius + " 0 0 1 " + (-radius) + "," + (-radius)
       + "v" + (2 * radius - height)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + (-radius)
       + "z";
}

I'll leave you to merge them if you need to.

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500)
  .append("g")
    .attr("transform", "translate(480,250)");
var rect = svg.append("path")
    //.attr("d", rightRoundedRect(-240, -120, 480, 240, 20));
    .attr("d", leftRoundedRect(-240, -120, 480, 240, 20));

// Returns path data for a rectangle with rounded right corners.
// Note: it’s probably easier to use a <rect> element with rx and ry attributes!
// The top-left corner is ⟨x,y⟩.
function rightRoundedRect(x, y, width, height, radius) {
  return "M" + x + "," + y
       + "h" + (width - radius)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - 2 * radius)
       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
       + "h" + (radius - width)
       + "z";
}

function leftRoundedRect(x, y, width, height, radius) {
  return "M" + (x + radius) + "," + y
       + "h" + (width - radius)
       + "v" + height
       + "h" + (radius - width)
       + "a" + radius + "," + radius + " 0 0 1 " + (-radius) + "," + (-radius)
       + "v" + (2 * radius - height)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + (-radius)
       + "z";
}

body {
  margin: auto;
  width: 960px;
  background-color: tomato;
}
path {
  fill: #222;
  stroke: #fef;
  stroke-width: 1.5px;
}

<script src="https://cdnjs.cloudflare./ajax/libs/d3/3.4.11/d3.min.js"></script>

The original solution is described in http://blog.bripkens.de/2011/06/svg-path-arc-curve-mand/

With my modifications you can assign a different angle to any corner and also offset by x, y.

function( x, y, width, height, tr, br, bl, tl ) {
    var data = [];

    // start point in top-middle of the rectangle
    data.push('M' + (x + width / 2) + ',' + y);

    // next we go to the right
    data.push('H' + (x + width - tr));

    if (tr > 0) {
        // now we draw the arc in the top-right corner
        data.push('A' + arcParameter(tr, tr, 0, 0, 1, (x + width), (y + tr)));
    }

    // next we go down
    data.push('V' + (y + height - br));

    if (br > 0) {
        // now we draw the arc in the lower-right corner
        data.push('A' + arcParameter(br, br, 0, 0, 1, (x + width - br), (y + height)));
    }

    // now we go to the left
    data.push('H' + (x + bl));

    if (bl > 0) {
        // now we draw the arc in the lower-left corner
        data.push('A' + arcParameter(bl, bl, 0, 0, 1, (x + 0), (y + height - bl)));
    }

    // next we go up
    data.push('V' + (y + tl));

    if (tl > 0) {
        // now we draw the arc in the top-left corner
        data.push('A' + arcParameter(tl, tl, 0, 0, 1, (x + tl), (y + 0)));
    }

    // and we close the path
    data.push('Z');

    return data.join(' ');
};

jsfiddle at http://jsfiddle/wcvrp0mq/