Rounded Corner

100%

Rounded Corner

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Nov 19, 2014

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.

AI-generated description

gpl-3.0 Licensed

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

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

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

73% match

Loading thumbnail…

SVG Fundamental

This example demonstrates a set of basic SVG shapes—circles and a line—arranged to show fundamental geometric primitives. It presents three circle variations, including a solid black circle, a two-tone circle with a light gray outer ring and purple inner fill, and a light blue circle, followed by a thick red horizontal line. The rendering uses raw SVG elements defined directly in the HTML, with inline styling for fills and strokes. Hover effects apply a CSS transform to scale the circle and line shapes on mouseover. No external libraries are used; the visualization relies solely on native SVG markup and CSS.

Ppaddyokore39@gmail.com

73% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates two basic SVG shapes: a red circle and a navy line, drawn within an inline `<svg>` element. It shows how static vector graphics can be defined declaratively using SVG’s coordinate system, with the circle centered at (50, 50) and the line spanning from the origin to (100, 100). The code uses plain SVG markup—`<circle>` and `<line>` elements with attributes for position, radius, fill, and stroke—without any JavaScript libraries or data sources. The rendering approach is direct SVG in HTML, highlighting fundamental shape properties and styling.

Ttomngeorge1@gmail.com

73% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes through a simple static composition. It shows two overlapping circles in red and green, a navy diagonal line, a horizontal path forming a rounded rectangular shape, and a black polyline with a sharp corner. The visualization uses raw SVG elements embedded directly in HTML, including `<circle>`, `<line>`, and `<path>`, all rendered with explicit coordinates and styling attributes. The code relies solely on the native SVG API without additional JavaScript libraries, and the rendering is entirely vector-based.

HHamim Rahman

72% match

Loading thumbnail…

svg3

This example demonstrates fundamental SVG shape construction using raw SVG elements within an HTML document. The page displays overlapping red and green circles, a navy diagonal line, a custom path forming a horizontal capsule shape, and a black polyline path with a right-angle turn. The SVG canvas is set to 960 by 500 pixels with hidden page overflow. The code uses literal SVG tags such as `<circle>`, `<line>`, and `<path>`, with explicit coordinate and styling attributes, including fill colors, stroke colors, and stroke widths. A commented-out rectangle shows an alternative shape configuration without rendering it.

Yyesyesnono01@yahoo.com

72% match

Loading thumbnail…

SVG Fundamentals

This example introduces the fundamentals of SVG shapes as a foundation for D3-based visualization work. It displays primitive geometric elements—two circles, a navy line, and a red path—positioned within a minimal SVG container in an HTML document. The code uses the SVG specification directly, including `<circle>`, `<line>`, and `<path>` elements, with attributes like `cx`, `cy`, `r`, and `d` to define geometry and styling. No dynamic data or JavaScript libraries are invoked; the visualization demonstrates static markup only, serving as a starting point for understanding how D3 version 6 generates and manipulates SVG output for charts.

MMridul Dey

72% match