Last active
August 25, 2022 00:50
Revisions
-
aPinix revised this gist
Aug 25, 2022 . 1 changed file with 63 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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); } -
aPinix created this gist
Aug 25, 2022 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@