Skip to content

Instantly share code, notes, and snippets.

@aPinix
Last active August 25, 2022 00:50

Revisions

  1. aPinix revised this gist Aug 25, 2022. 1 changed file with 63 additions and 1 deletion.
    64 changes: 63 additions & 1 deletion svg-rounded-brackets-path.js
    Original file line number Diff line number Diff line change
    @@ -1 +1,63 @@
    ‎‎
    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);
    }
  2. aPinix created this gist Aug 25, 2022.
    1 change: 1 addition & 0 deletions svg-rounded-brackets-path.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎