Skip to main content
100%

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

✓ Published0🌍 Public
Aandresin87
Last edited Feb 11, 2016
Created on Feb 11, 2016

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.

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".

Similar vizzes

Loading thumbnail…

Closest Point on a Path and Its Tangent

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.

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
79% 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
75% 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
74% 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
74% 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
73% 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
73% match
Loading thumbnail…

Point-Along-Path Interpolation

Two nested, closed Catmull–Rom splines define the paths in this SVG animation. Clicking anywhere adds a colored circle that first collapses to the inner path’s start, then follows the outer path via a tween that switches between the two paths partway through the animation. The code uses D3 v3’s `transition.attrTween` with the native SVG `getTotalLength` and `getPointAtLength` methods to interpolate each circle’s position, while a text element displays the tween progress as a percentage.

Aantonyross
73% match