Closest Point on a Path and Its Tangent

100%

Closest Point on a Path and Its Tangent

✓ Published0🌍 Public

Last edited Feb 14, 2016

Created on Feb 10, 2016

This example shows a closed cardinal spline path with a draggable circle that snaps to the closest point on the path. As the user drags the circle over the SVG area, a red tangent line appears at the nearest path location, with its angle and position continuously updated based on the path geometry. The visualization uses D3’s drag behavior, SVG path interpolation, and a binary search plus linear scan to compute the closest point and tangent. It also includes the pathseg.js polyfill to support the SVGPathSeg API in browsers that removed it.

AI-generated description

Drag The circle through the svg area and discover the behaviour.

The "pathSegList" method was removed in chome version 58 so you need to include the javascript library "pathseg.js".

Newest faster version Here!

Similar vizzes

Loading thumbnail…

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Closest Point on a Path and Its Tangent

A draggable circle snaps to the nearest point along a closed, cardinal-interpolated path while a red tangent line updates to show the path's direction at that location. Built with D3 v3 and SVG, the example demonstrates the `closestPoint` algorithm using `getPointAtLength` with a linear scan and binary search, and `getTangent` to compute the tangent via nearby points. The code relies on the `pathSegList` API and the `pathseg.js` polyfill for compatibility with modern browsers.

Aandresin87

92% match

Loading thumbnail…

Closest Point on Path

A black cardinal-interpolated path connects ten fixed points. As the mouse moves over the SVG canvas, a red line and circle dynamically trace the nearest location on that path to the cursor. The example demonstrates an approximate algorithm built on D3 v3’s SVG path API, using `getTotalLength` and `getPointAtLength` for a coarse linear scan followed by a binary search to refine the result to roughly one pixel accuracy.

Mmbostock

80% match

Loading thumbnail…

Closest Point to Segment

A red circle tracks the closest point on a black segment to the cursor, with a dashed line connecting the cursor to that point and a label showing the segment's parameter value. The circle turns green when the closest point lies within the segment’s interior. Using D3 v3, the code computes the projection via the `pointLineSegmentParameter` function and updates SVG elements on `mousemove`. It also draws interpolated ticks and darkened endpoint markers to clarify segment geometry.

Mmbostock

77% match

Loading thumbnail…

Closest Point on Path II

This example demonstrates an approximate method for finding the closest point on an SVG path by sampling points along the path and computing their Voronoi tessellation. A range slider controls the sampling distance, where denser samples yield more accurate results but are computationally more expensive. The visualization uses d3.geom.voronoi to create the tessellation, d3.svg.line for path interpolation, and SVG path APIs like getPointAtLength and getTotalLength for sampling. Hovering over any Voronoi cell highlights the corresponding cell and its sampled point, visualizing how the approximation changes with sample density.

Mmbostock

75% match

Loading thumbnail…

Point-Along-Path Interpolation

A click on the SVG canvas spawns a blue circle that continuously animates along a closed Catmull–Rom spline, while a second static path outlines a similar shape. The moving circle’s position is interpolated using the SVG path methods `getTotalLength` and `getPointAtLength`, driven by D3’s `transition.attrTween` over a 10-second loop. Two cardinal-closed paths are drawn with `d3.svg.line`, and the code also supports adding runners with random colors.

Aantonyross

73% match

Loading thumbnail…

Point-Along-Path Interpolation

Two closed Catmull–Rom spline paths appear as black outlines on a white SVG canvas. Clicking anywhere on the canvas spawns a colored circle that animates along the path, moving at a constant speed. This is achieved by leveraging the SVG path methods `getTotalLength()` and `getPointAtLength()` to compute the circle’s position at each animation frame. The motion loops continuously, with each circle retaining its own velocity, acceleration, and top-speed properties, producing an organic, independent movement around the spline.

Aantonyross

72% match

Loading thumbnail…

Point-Along-Path Interpolation

Two closed Catmull–Rom splines form two nested loops, and clicking anywhere on the SVG adds a circle that animates along the outer path. The example demonstrates SVG’s `getTotalLength` and `getPointAtLength` methods to compute positions along the path, driving each circle’s transform via a `transition.attrTween` that loops indefinitely. The code uses D3 v3, with `d3.svg.line` and a cardinal-closed interpolation to define the splines, and renders the animation as SVG circles and paths.

Aantonyross

72% match

Loading thumbnail…

Point-Along-Path Interpolation

Two closed Catmull–Rom splines are drawn with D3’s SVG line generator, and clicking anywhere on the page appends a red circle that begins a looping 10-second transition along one of the paths. The animation relies on the native SVG path methods `getTotalLength` and `getPointAtLength`, which the `transition.attrTween` uses to compute the circle’s position at each time step. The example demonstrates point-along-path interpolation with d3.v3, rendering both the static paths and animated circles in SVG.

Aantonyross

71% match