Created
September 26, 2019 14:25
-
-
Save skokenes/6fa266f4f50c86f77ceabcd6dfca9e42 to your computer and use it in GitHub Desktop.
SVG Path Generator for Rounded Rectangles
This file contains 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 characters
| function createRoundedRectPath(x, y, width, height, radius) { | |
| return ( | |
| // Move to position, offset by radius in x direction | |
| "M" +(x + radius) + "," + y | |
| // Draw a horizontal line to the top right curve start | |
| + "h" + (width - 2 * radius) | |
| // Draw the top right corner curve | |
| + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius | |
| // Draw a vertical line to the bottom right corner | |
| + "v" + (height - 2 * radius) | |
| // Draw the bottom right corner curve | |
| + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius | |
| // Draw a horizontal line to the bottom left corner | |
| + "h" + (2 * radius - width) | |
| // Draw the bottom left corner | |
| + "a" + -radius + "," + -radius + " 0 0 1 " + -radius + "," + -radius | |
| // Draw a vertical line to the top left corner | |
| + "v" + (2 * radius - height) | |
| // Draw the top left corner | |
| + "a" + radius + "," + -radius + " 0 0 1 " + radius + "," + -radius | |
| // Close the shape | |
| + "z" | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Works like a charm, great stuff!