Rounded Rectangle

100%

Rounded Rectangle

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Aug 25, 2012

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.

AI-generated description

An answer to Stack Overflow question: svg / d3.js rounded corner on one corner of a rectangle.

gpl-3.0 Licensed

Similar vizzes

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

75% 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

72% match

Loading thumbnail…

D3 Rectangle Examples

This example demonstrates the creation of six SVG rectangles using D3.js, each illustrating different visual properties such as fill color, stroke width and alignment, offset positioning, and corner radii. It also includes a seventh set that arranges three colored rectangles with varied dimensions and placements. The code uses D3’s selection and append methods to build SVG elements, with data defined as inline JavaScript objects specifying attributes like width, height, and style. The page is rendered at a fixed size and relies on D3 2.4.5.

GGuerino1

71% match

Loading thumbnail…

Bar with round top corners

This example demonstrates a single SVG bar with rounded top corners, drawn using a path element that defines the shape with explicit coordinates and arc commands. The code loads D3 v5 via UNPKG and uses the `d3.select` method to append the SVG and path to the page. It also showcases local ES6 module imports through `myMessage.js`, which exports a simple string. The bar’s corner radius is computed conditionally, ensuring the vertical radius does not exceed the height, and the path is rendered with a black outline and no fill.

PPiotr Paszek

71% match

Loading thumbnail…

Fork of Fork of Fork of Bar with round bottom corners

This example draws a single SVG path with rounded bottom corners using D3 v5. The code computes corner radii and arc commands manually, handling both positive and negative heights. It loads D3 from UNPKG and uses `d3.select` to append the path to a container. The path is styled with a black stroke and no fill, and the script includes a commented-out local ES6 module import.

PPiotr Paszek

70% match

Loading thumbnail…

Fork of Fork of Bar with round corners right - universal

This example draws a single bar with rounded corners on its right side using a computed SVG path. The code imports `select` from D3 v5 and builds the path string manually with conditional logic for positive and negative bar widths, adjusting corner radii accordingly. It renders the shape as an unfilled, black-stroked path inside an SVG appended to the page’s container. The example also demonstrates local ES6 module imports, though the imported message is not displayed.

PPiotr Paszek

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

70% match

Loading thumbnail…

Rectangle

This example shows a single blue rectangle with rounded corners, drawn inside an SVG canvas. The shape is defined using the SVG `<rect>` element, with explicit attributes for width, height, position along the x and y axes, and corner radii. The code constructs the SVG directly in an HTML body, bypassing any external libraries or data sources. The rendering approach is straightforward static SVG, with the rectangle’s fill color set to blue.

CCora

70% match