Skip to main content
100%

Draw SVG Rounded Rectangle Path

✓ Published0🌍 Public
Aackuser
Last edited Jan 4, 2015
Created on Mar 3, 2023

This example demonstrates how to construct an SVG path string for a rounded rectangle with independently specified corner radii. The code defines a `roundedRectData` function that returns the full path data using SVG path commands, including `M`, `L`, `A` (arc), and `Z`. The function takes width, height, and four corner radius parameters, making it flexible for varied shapes. The implementation is plain JavaScript with no external libraries, relying solely on the SVG path syntax for rendering. It shows the precise coordinate calculations needed to create smooth rounded corners.

AI-generated description

Similar vizzes

Loading thumbnail…

Rounded Rectangle

This example demonstrates how to draw a rectangle with rounded corners on only its right side using an SVG path. The code defines a function, `rightRoundedRect`, that constructs the necessary path data using absolute and relative commands, including an arc for the rounded corners. It uses D3.js v3 to append the path to an SVG container and centers it within the viewport. The visual result is a single gray shape with a black stroke, illustrating a technique commonly applied in custom chart annotations and UI elements.

Mmbostock
81% match
Loading thumbnail…

rounded-corner-curve

An interactive line chart demonstrates a technique for drawing smooth paths with rounded corners through data points, contrasting it with a standard linear interpolation. The example generates random data and displays two paths: a default black line and a magenta path with rounded corners. Moving the mouse horizontally adjusts the rounding intensity in real time, revealing how the SVG path `C` (cubic Bézier) commands create the effect. The code uses d3.js for data generation and SVG path construction, with custom logic for path string manipulation.

11wheel
71% match
Loading thumbnail…

Rounded Corner

This example demonstrates how to compute a rounded corner between a line and a circle, using geometric offsets and circle-line intersection formulas. The SVG rendering shows the original line, the outer circle, a dashed offset circle, and the resulting corner circle in red, along with its origin and tangency points. The code relies on D3.js v3 to append SVG elements and markers, while performing manual trigonometric calculations for the perpendicular and parallel offset lines, and solving the intersection to place the corner circle. The visualization clarifies the construction steps without any interaction or animation.

Mmbostock
71% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape construction in a 960×500 viewport, showing circles, rectangles, lines, and paths with varied fill, stroke, and pathLength attributes. The code uses raw SVG markup directly in HTML, with no JavaScript libraries—relying on native SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` to define geometry. A red curved path combines cubic arcs and straight segments, while a black polyline connects three points. The example serves as a minimal primer on SVG coordinate systems, stroke styling, and path data syntax.

Nneslihandincel@gmail.com
71% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG path syntax for drawing custom shapes. It renders two red stroked paths on a 200x100 viewBox using the `d` attribute with arc commands (`A`, `a`), quadratic Bézier curves (`Q`, `q`), and line segments (`M`, `h`). The first path forms a stylized heart-like shape composed of arcs and curves, while the second builds a smaller abstract form from repeated arcs and an open quadratic tail. The code uses plain SVG within an HTML page, with no external libraries or data sources.

WWiebke
70% match
Loading thumbnail…

DataViz_Examples

This example shows a single rounded red rectangle with a thick blue stroke rendered inside a 400×400 SVG canvas. The drawing appears in the center of a page with oversized 13em text styling, though no text is visible. The code uses raw SVG elements—specifically a `rect` with `rx` and `ry` attributes—and applies inline CSS properties for fill, stroke, and stroke width. It also includes a script that logs a message to the browser’s developer console, demonstrating basic HTML, CSS, and JavaScript integration without any external libraries.

SSubhadra Sundar
69% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates basic SVG shape construction using raw HTML and SVG markup. It displays overlapping red and green circles, a navy diagonal line, a filled path resembling a rounded bracket, and a black open path with sharp corners. The code uses standard SVG elements like `<circle>`, `<line>`, and `<path>` with inline attributes for positioning and styling. A commented-out `<rect>` shows an alternate shape, while the `<style>` block removes page margins and hides overflow for a clean canvas. The rendering relies entirely on native SVG, with no external libraries or data sources.

Mmgrannan3
69% match
Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes rendered directly in a web page, including circles, rectangles, lines, and paths. It shows how to style these elements with attributes like fill, stroke, and stroke-width, as well as how to construct complex path data using commands such as M (move to), L (line), A (arc), Q (quadratic curve), and z (close path). The visualization uses no JavaScript libraries, relying purely on static SVG markup within an HTML document to illustrate basic vector graphics syntax and rendering.

ZzolboBatsaikhan
69% match