createSvgRectWithBorderRadius('.wrapper', '#09f', 0, 0, 400, 300, 40, 70, 20, 110);

/**

• Create a rounded rectangle (allows for different radius on each corner)
• @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 rectangle
• @param {number} positionX Position of the rectangle on the x axis
• @param {number} positionY Position of the rectangle on the y axis
• @param {number} width Width of the rectangle
• @param {number} height Height of the rectangle
• @param {number} topLeftRadius Radius of the top left corner
• @param {number} topRightRadius Radius of the top right corner
• @param {number} bottomRightRadius Radius of the bottom right corner
• @param {number} bottomLeftRadius Radius of the bottom left corner */ function createSvgRectWithBorderRadius(elemSelector, color, positionX, positionY, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius) { const svgRectWithBorderRadius = (positionX, positionY, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius) => { return M${positionX + topLeftRadius},${positionY}\ h${width - (topLeftRadius + topRightRadius)}\ a${topRightRadius},${topRightRadius} 0 0 1 ${topRightRadius},${topRightRadius}\ v${height - (topRightRadius + bottomRightRadius)}\ a${bottomRightRadius},${bottomRightRadius} 0 0 1 -${bottomRightRadius},${bottomRightRadius}\ h-${width - (bottomLeftRadius + bottomRightRadius)}\ a${bottomLeftRadius},${bottomLeftRadius} 0 0 1 -${bottomLeftRadius},-${bottomLeftRadius}\ v-${height - (topLeftRadius + bottomLeftRadius)}\ a${topLeftRadius},${topLeftRadius} 0 0 1 ${topLeftRadius},-${topLeftRadius}\ 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', svgRectWithBorderRadius(positionX, positionY, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius)); path.setAttribute('fill', color); svg.append(path); }