Create svg rounded brackets

svg-rounded-brackets-path.js

createSvgBracketWithBorderRadius('.wrapper', '#09f', 0, 0, 30, 100, 10, 8, 'left');
createSvgBracketWithBorderRadius('.wrapper', '#09f', 0, 0, 30, 100, 10, 8, 'right');

/**
 * Create svg rounded brackets
 * @author  aPinix <https://twitter.com/aPinix>
 * @version 1.0
 * @see     {@link https://codepen.io/aPinix/pen/dyRvjQq}
 * @link    https://codepen.io/aPinix/pen/dyRvjQq
 * @param  {string} elemSelector    The selector for the element to append the svg
 * @param  {string} color           The color of the bracket
 * @param  {number} positionX       Position of the bracket on the x axis
 * @param  {number} positionY       Position of the bracket on the y axis
 * @param  {number} width           Width of the bracket
 * @param  {number} height          Height of the bracket
 * @param  {number} borderRadius    Border radius of the bracket
 * @param  {number} borderWidth     Border width of the bracket
 * @param  {string} side            Side of the bracket (left or right)
 */
function createSvgBracketWithBorderRadius(elemSelector, color, positionX, positionY, width, height, borderRadius, borderWidth, side) {
  const svgBracketWithBorderRadius = (positionX, positionY, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius, closeLine = false) => {
    const borderWidthHalf = borderWidth / 2;

    if (side === 'left') {
      return `M${width - borderWidthHalf}, ${positionY + borderWidthHalf}\
        L ${borderRadius}, ${positionY + borderWidthHalf}\
        Q ${positionX + borderWidthHalf}, ${positionY + borderWidthHalf}\
          ${positionX + borderWidthHalf}, ${borderRadius}\
        L ${positionX + borderWidthHalf}, ${height - borderRadius}\
        Q ${positionX + borderWidthHalf}, ${height - borderWidthHalf}\
          ${borderRadius}, ${height - borderWidthHalf}\
        L ${borderRadius}, ${height - borderWidthHalf}\
        L ${width - borderWidthHalf}, ${height - borderWidthHalf}\
      ${closeLine ? 'z' : ''}`;
    }

    if (side === 'right') {
      return `M${positionX + borderWidthHalf}, ${positionY + borderWidthHalf}\
        L ${width - borderRadius}, ${positionY + borderWidthHalf}\
        Q ${width - borderWidthHalf}, ${positionY + borderWidthHalf}\
          ${width - borderWidthHalf}, ${borderRadius + borderWidthHalf}\
        L ${width - borderWidthHalf}, ${height - borderRadius}\
        Q ${width - borderWidthHalf}, ${height - borderWidthHalf}\
          ${width - borderRadius}, ${height - borderWidthHalf}\
        L ${borderRadius}, ${height - borderWidthHalf}\
        L ${positionX + borderWidthHalf}, ${height - borderWidthHalf}\
      ${closeLine ? 'z' : ''}`;
    }
  }

  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('width', width);
  svg.setAttribute('height', height);
  document.querySelector(elemSelector).append(svg);

  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', svgBracketWithBorderRadius(positionX, positionY, width, height, borderRadius, borderWidth, side));
  path.setAttribute('fill', 'none');
  path.setAttribute('stroke', color);
  path.setAttribute('stroke-width', borderWidth);
  path.setAttribute('stroke-linecap', 'round');
  svg.append(path);
}

https://codepen.io/aPinix/pen/zYdbzag