Skip to content

Instantly share code, notes, and snippets.

@aPinix

aPinix/svg-rounded-rectangle-path.js

Last active April 16, 2024 21:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aPinix/708391fe11f50574494e041e8608e22c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aPinix/708391fe11f50574494e041e8608e22c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. aPinix revised this gist Aug 25, 2022. No changes.
  2. aPinix revised this gist Aug 25, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion svg-rounded-rectangle-path.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    createSvgRectWithBorderRadius('.wrapper', '#09f', 0, 0, 400, 300, 40, 70, 20, 110);

    /**
    * Create a rounded rectangle (allows for different radius on each corner)
    * Create a rounded rectangle (different radius for each corner)
    * @author aPinix <https://twitter.com/aPinix>
    * @version 1.0
    * @see {@link https://codepen.io/aPinix/pen/dyRvjQq}
  3. aPinix revised this gist Aug 25, 2022. No changes.
  4. aPinix revised this gist Aug 25, 2022. 1 changed file with 0 additions and 3 deletions.
    3 changes: 0 additions & 3 deletions svg-rounded-rectangle-path.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +0,0 @@
    # This is a title

    ![image](https://gist.github.com/aPinix/708391fe11f50574494e041e8608e22c/raw/images---Thu_Aug_25_2022_1661387447006.png)
  5. aPinix revised this gist Aug 25, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion svg-rounded-rectangle-path.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,3 @@
    # This is a title

    ![image](https://gist.github.com/aPinix/708391fe11f50574494e041e8608e22c/raw/images---Thu_Aug_25_2022_1661387319950.png)
    ![image](https://gist.github.com/aPinix/708391fe11f50574494e041e8608e22c/raw/images---Thu_Aug_25_2022_1661387447006.png)
  6. aPinix revised this gist Aug 25, 2022. No changes.
  7. aPinix revised this gist Aug 25, 2022. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion svg-rounded-rectangle-path.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,3 @@
    ‎‎​
    # This is a title

    ![image](https://gist.github.com/aPinix/708391fe11f50574494e041e8608e22c/raw/images---Thu_Aug_25_2022_1661387319950.png)
  8. aPinix revised this gist Aug 25, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions svg-rounded-rectangle-path.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎​
  9. aPinix renamed this gist Aug 25, 2022. 1 changed file with 0 additions and 0 deletions.
    0 svg-rounded-rectangle-path.md → svg-rounded-rectangle-path.js
    View file
    File renamed without changes.
  10. aPinix renamed this gist Aug 25, 2022. 1 changed file with 0 additions and 0 deletions.
    0 svg-rounded-rectangle-path.js → svg-rounded-rectangle-path.md
    View file
    File renamed without changes.
  11. aPinix revised this gist Aug 25, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions svg-rounded-rectangle-path.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,6 +7,7 @@ createSvgRectWithBorderRadius('.wrapper', '#09f', 0, 0, 400, 300, 40, 70, 20, 11
    * @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
  12. aPinix revised this gist Aug 25, 2022. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions svg-rounded-rectangle-path.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    createRoundRect('.wrapper', 0, 0, 400, 300, 40, 70, 20, 110);
    createSvgRectWithBorderRadius('.wrapper', '#09f', 0, 0, 400, 300, 40, 70, 20, 110);

    /**
    * Create a rounded rectangle (allows for different radius on each corner)
    @@ -16,7 +16,7 @@ createRoundRect('.wrapper', 0, 0, 400, 300, 40, 70, 20, 110);
    * @param {number} bottomRightRadius Radius of the bottom right corner
    * @param {number} bottomLeftRadius Radius of the bottom left corner
    */
    function createSvgRectWithBorderRadius(elemSelector, positionX, positionY, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius) {
    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)}\
    @@ -37,5 +37,6 @@ createRoundRect('.wrapper', 0, 0, 400, 300, 40, 70, 20, 110);

    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);
    }
  13. aPinix revised this gist Aug 25, 2022. No changes.
  14. aPinix revised this gist Aug 25, 2022. 1 changed file with 0 additions and 17 deletions.
    17 changes: 0 additions & 17 deletions svg-rounded-rectabgle-path.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,17 +0,0 @@
    .wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    > * + * {
    margin-left: 40px;
    }
    }

    svg {
    path {
    fill: tomato;
    }
    }
  15. aPinix revised this gist Aug 25, 2022. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion svg-rounded-rectabgle-path.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    <div class="wrapper"></div>
  16. aPinix revised this gist Aug 25, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion svg-rounded-rectangle-path.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@ createRoundRect('.wrapper', 0, 0, 400, 300, 40, 70, 20, 110);
    * @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 to
    * @param {string} elemSelector The selector for the element to append the svg
    * @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
  17. aPinix revised this gist Aug 25, 2022. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions svg-rounded-rectangle-path.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@ createRoundRect('.wrapper', 0, 0, 400, 300, 40, 70, 20, 110);
    * @version 1.0
    * @see {@link https://codepen.io/aPinix/pen/dyRvjQq}
    * @link https://codepen.io/aPinix/pen/dyRvjQq
    * @param {string} selector The selector for the element to append to
    * @param {string} elemSelector The selector for the element to append to
    * @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
    @@ -16,7 +16,7 @@ createRoundRect('.wrapper', 0, 0, 400, 300, 40, 70, 20, 110);
    * @param {number} bottomRightRadius Radius of the bottom right corner
    * @param {number} bottomLeftRadius Radius of the bottom left corner
    */
    function createSvgRectWithBorderRadius(selector, positionX, positionY, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius) {
    function createSvgRectWithBorderRadius(elemSelector, 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)}\
    @@ -33,7 +33,7 @@ createRoundRect('.wrapper', 0, 0, 400, 300, 40, 70, 20, 110);
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('width', width);
    svg.setAttribute('height', height);
    document.querySelector(selector).append(svg);
    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));
  18. aPinix revised this gist Aug 25, 2022. No changes.
  19. aPinix revised this gist Aug 25, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion svg-rounded-rectabgle-path.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    ‎‎​
    <div class="wrapper"></div>
  20. aPinix revised this gist Aug 25, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions svg-rounded-rectabgle-path.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎​
  21. aPinix revised this gist Aug 25, 2022. 1 changed file with 17 additions and 1 deletion.
    18 changes: 17 additions & 1 deletion svg-rounded-rectabgle-path.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,17 @@
    ‎‎​
    .wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    > * + * {
    margin-left: 40px;
    }
    }

    svg {
    path {
    fill: tomato;
    }
    }
  22. aPinix revised this gist Aug 25, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions svg-rounded-rectabgle-path.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎​
  23. aPinix revised this gist Aug 25, 2022. 1 changed file with 9 additions and 9 deletions.
    18 changes: 9 additions & 9 deletions svg-rounded-rectangle-path.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,15 +6,15 @@ createRoundRect('.wrapper', 0, 0, 400, 300, 40, 70, 20, 110);
    * @version 1.0
    * @see {@link https://codepen.io/aPinix/pen/dyRvjQq}
    * @link https://codepen.io/aPinix/pen/dyRvjQq
    * @param {String} selector The selector for the element to append to
    * @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
    * @param {string} selector The selector for the element to append to
    * @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(selector, positionX, positionY, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius) {
    const svgRectWithBorderRadius = (positionX, positionY, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius) => {
  24. aPinix revised this gist Aug 25, 2022. No changes.
  25. aPinix revised this gist Aug 25, 2022. 1 changed file with 12 additions and 11 deletions.
    23 changes: 12 additions & 11 deletions svg-rounded-rectangle-path.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,18 +2,19 @@ createRoundRect('.wrapper', 0, 0, 400, 300, 40, 70, 20, 110);

    /**
    * Create a rounded rectangle (allows for different radius on each corner)
    * @author aPinix <a.pinix@gmail.com>
    * @author aPinix <https://twitter.com/aPinix>
    * @version 1.0
    * @see {@link https://codepen.io/aPinix/pen/dyRvjQq}
    * @param {String} selector The selector for the element to append to
    * @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
    * @see {@link https://codepen.io/aPinix/pen/dyRvjQq}
    * @link https://codepen.io/aPinix/pen/dyRvjQq
    * @param {String} selector The selector for the element to append to
    * @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(selector, positionX, positionY, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius) {
    const svgRectWithBorderRadius = (positionX, positionY, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius) => {
  26. aPinix revised this gist Aug 25, 2022. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion svg-rounded-rectangle-path.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,8 @@ createRoundRect('.wrapper', 0, 0, 400, 300, 40, 70, 20, 110);
    /**
    * Create a rounded rectangle (allows for different radius on each corner)
    * @author aPinix <a.pinix@gmail.com>
    * https://codepen.io/aPinix/pen/dyRvjQq
    * @version 1.0
    * @see {@link https://codepen.io/aPinix/pen/dyRvjQq}
    * @param {String} selector The selector for the element to append to
    * @param {Number} positionX Position of the rectangle on the x axis
    * @param {Number} positionY Position of the rectangle on the y axis
  27. aPinix revised this gist Aug 25, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions svg-rounded-rectangle-path.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,7 @@ createRoundRect('.wrapper', 0, 0, 400, 300, 40, 70, 20, 110);

    /**
    * Create a rounded rectangle (allows for different radius on each corner)
    * @author aPinix <a.pinix@gmail.com>
    * https://codepen.io/aPinix/pen/dyRvjQq
    * @param {String} selector The selector for the element to append to
    * @param {Number} positionX Position of the rectangle on the x axis
  28. aPinix revised this gist Aug 25, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions svg-rounded-rectangle-path.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,7 @@ createRoundRect('.wrapper', 0, 0, 400, 300, 40, 70, 20, 110);

    /**
    * Create a rounded rectangle (allows for different radius on each corner)
    * https://codepen.io/aPinix/pen/dyRvjQq
    * @param {String} selector The selector for the element to append to
    * @param {Number} positionX Position of the rectangle on the x axis
    * @param {Number} positionY Position of the rectangle on the y axis
  29. aPinix revised this gist Aug 25, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion svg-rounded-rectangle-path.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    createRoundRect('.wrapper', 0, 0, 400, 300, 40, 70, 20, 110);

    /**
    * Create a rounded rectangle (Allows for different radius on each corner)
    * Create a rounded rectangle (allows for different radius on each corner)
    * @param {String} selector The selector for the element to append to
    * @param {Number} positionX Position of the rectangle on the x axis
    * @param {Number} positionY Position of the rectangle on the y axis
  30. aPinix revised this gist Aug 25, 2022. 1 changed file with 10 additions and 10 deletions.
    20 changes: 10 additions & 10 deletions svg-rounded-rectangle-path.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,16 @@
    createRoundRect('.wrapper', 0, 0, 400, 300, 40, 70, 20, 110);

    /**
    * Get path data for a rounded rectangle. Allows for different radius on each corner.
    * @param {String} selector
    * @param {Number} positionX
    * @param {Number} positionY
    * @param {Number} width
    * @param {Number} height
    * @param {Number} topLeftRadius
    * @param {Number} topRightRadius
    * @param {Number} bottomRightRadius
    * @param {Number} bottomLeftRadius
    * Create a rounded rectangle (Allows for different radius on each corner)
    * @param {String} selector The selector for the element to append to
    * @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(selector, positionX, positionY, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius) {
    const svgRectWithBorderRadius = (positionX, positionY, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius) => {