Skip to content

Instantly share code, notes, and snippets.

@danielpquinn
Last active June 4, 2024 07:01
Show Gist options
  • Save danielpquinn/dd966af424030d47e476 to your computer and use it in GitHub Desktop.
Save danielpquinn/dd966af424030d47e476 to your computer and use it in GitHub Desktop.
Draw SVG Rounded Rectangle Path
/**
* Get path data for a rounded rectangle. Allows for different radius on each corner.
* @param {Number} w Width of rounded rectangle
* @param {Number} h Height of rounded rectangle
* @param {Number} tlr Top left corner radius
* @param {Number} trr Top right corner radius
* @param {Number} brr Bottom right corner radius
* @param {Number} blr Bottom left corner radius
* @return {String} Rounded rectangle SVG path data
*/
var roundedRectData = function (w, h, tlr, trr, brr, blr) {
return 'M 0 ' + tlr
+ ' A ' + tlr + ' ' + tlr + ' 0 0 1 ' + tlr + ' 0'
+ ' L ' + (w - trr) + ' 0'
+ ' A ' + trr + ' ' + trr + ' 0 0 1 ' + w + ' ' + trr
+ ' L ' + w + ' ' + (h - brr)
+ ' A ' + brr + ' ' + brr + ' 0 0 1 ' + (w - brr) + ' ' + h
+ ' L ' + blr + ' ' + h
+ ' A ' + blr + ' ' + blr + ' 0 0 1 0 ' + (h - blr)
+ ' Z';
};
@aPinix
Copy link

aPinix commented Mar 12, 2020

Mate, this helped me a lot. Thank you very much! 😀

@smakey
Copy link

smakey commented Mar 31, 2020

This is awesome. Thanks !

@Ora-solution
Copy link

Thanks, bro, this is really helpful!

@kre1z0
Copy link

kre1z0 commented Feb 14, 2021

Thanks!

@lunatic-fox
Copy link

Thank you very much for this gist! 🤩
It was amazing helpful!

@sunzero23
Copy link

thank you so much!!!!!!!!!

@cjhgit
Copy link

cjhgit commented Aug 24, 2022

Great!

@aPinix
Copy link

aPinix commented Aug 25, 2022

@JuliaSukach
Copy link

Thanks!!! That helped me a lot!

@SlavaIvanov-sweatcoin
Copy link

perfect! thanks!

@hirasso
Copy link

hirasso commented Jan 20, 2024

This is beautiful, thanks! I asked ChatGPT to make it even more beautifuler 😉

/**
 * Get path data for a rounded rectangle. Allows for different radius on each corner.
 * @param  {Number} w   Width of rounded rectangle
 * @param  {Number} h   Height of rounded rectangle
 * @param  {Number} tlr Top left corner radius
 * @param  {Number} trr Top right corner radius
 * @param  {Number} brr Bottom right corner radius
 * @param  {Number} blr Bottom left corner radius
 * @return {String}     Rounded rectangle SVG path data
 */
function roundedRectData(w, h, tlr, trr, brr, blr) {
  return `
    M 0 ${tlr}
    A ${tlr} ${tlr} 0 0 1 ${tlr} 0
    L ${w - trr} 0
    A ${trr} ${trr} 0 0 1 ${w} ${trr}
    L ${w} ${h - brr}
    A ${brr} ${brr} 0 0 1 ${w - brr} ${h}
    L ${blr} ${h}
    A ${blr} ${blr} 0 0 1 0 ${h - blr} Z
  `;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment