Progress Nav

100%

✓ Published0🌍 Public

Last edited Jan 23, 2026

Created on Jan 23, 2026

This example shows a page navigation where a smooth, highlighted path marks the table of contents sections currently in view as the user scrolls. The visualization uses an SVG path as a progress marker, with its stroke-dasharray and stroke-dashoffset updated dynamically to reveal only the portion corresponding to visible content. It relies on the `getBoundingClientRect` API to determine element visibility and the SVG `getTotalLength` method to measure path segments. The marker animates via CSS transitions, and the layout is styled with SCSS.

AI-generated description

Similar vizzes

Loading thumbnail…

Progress Nav

A scrolling page navigation with an animated SVG marker that highlights the currently visible sections. As the user scrolls, a JavaScript routine calculates the vertical position of each linked section relative to the viewport and dynamically updates a smooth path drawn on a transparent SVG overlay. The path traces the indented table-of-contents links, connecting and highlighting all headings that are on screen at once, with rounded line caps and joints. The code uses `getTotalLength` to measure and animate the path along the outline of the active nav items, creating a continuous progress indicator that responds to scroll position and indent changes.

Aabernier

93% match

Loading thumbnail…

Animate SVG path on scroll

An SVG path is drawn incrementally as the user scrolls, stopping when it reaches a fixed horizontal marker line. The visualization uses D3 to map scroll position to the length of the path, animating the path’s stroke-dashoffset to reveal it progressively. A fixed marker div acts as the target line, and the path data consists of a series of points with varying x-coordinates, creating a jagged line. The example demonstrates scroll-driven SVG animation, built with D3 and Lodash, and is intended for use in an unreleased side project.

Aajayjayayy

69% match

Loading thumbnail…

Animate SVG path on scroll

An SVG path of a hand-drawn line animates as the user scrolls, revealing the path incrementally down a tall 20,000-pixel viewport. Using D3 and Lodash, the example maps the browser’s scroll position to the length of the path, drawing only up to a fixed horizontal line (indicated by a marker div). As the user scrolls, the path appears to draw itself progressively, stopping when it reaches the marker. The visualization demonstrates a scroll-driven animation technique applied to a single SVG path with a minimal, fixed marker overlay.

Aajayjayayy

69% match

Loading thumbnail…

scrollytest3

This example demonstrates a scrolling narrative visualization built with D3.js, where user scroll progress drives animated transitions in an SVG/WebGL-rendered scene. The chart uses the `graph-scroll` library to bind scroll events to step-wise updates, likely revealing or transitioning between data states as the reader moves through the page. The visualization is generated from a Blockbuilder.org template and is part of a series of scrolling prototypes (scrollytest1/2), indicating iterative exploration of scroll-driven storytelling. Rendered with SVG and WebGL, it combines D3 v4 with jetpack utilities for concise coding. The MIT-licensed example shows how scrolling can act as an interactive narrative mechanism to sequence changes in the visualization.

335degrees

68% match

Loading thumbnail…

Progressive pie chart 4

A progress widget displays a percentage value inside a ring-shaped pie chart, with the ring filling clockwise as the number animates. The visualization cycles automatically, updating the displayed percentage and arc every 1.5 seconds. Built with D3.js, the code uses `d3.layout.pie` for layout, `d3.svg.arc` to define both full-circle background and foreground arcs, and `transition.attrTween` with `d3.interpolate` to smoothly animate the arc and a text counter. The SVG includes an inset-shadow filter for a recessed effect, and the page styles the widget with a card-like header and centered layout.

SSokrates86

67% match

Loading thumbnail…

Path Transitions

A real-time scrolling line chart demonstrates a surprising visual artifact when animating the path. The chart displays a sliding window of 40 random data points, with new values entering from the right and old ones exiting left. The example uses D3's `transition` API and SVG path interpolation to animate the line. It reveals that default path interpolation parses the `d` attribute's numbers and pairs them in order, causing vertical "wiggling" as control points move in place. The solution involves interpolating the chart's transform instead of the path data.

GGerHobbelt

67% match

Loading thumbnail…

Progressive pie chart 3

This animated donut chart displays a "Progress Status" percentage within a stylized widget. A dark blue background ring contains a lighter blue foreground arc that grows to represent the current percentage value, with a large numeric label at the center. The visualization uses the D3.js library, leveraging `d3.layout.pie` for the arc geometry and `d3.svg.arc` to define the ring shape. The animation is driven by `pathForeground.transition()` with the `arcTween` function, which interpolates the arc's end angle and updates the center text every 1.5 seconds. The SVG rendering includes a custom filter inset-shadow applied to the arcs, created through a series of `feOffset` and `feComposite` elements. No external data file is used; the displayed percentage is randomly generated within a set range.

SSokrates86

67% match

Loading thumbnail…

Gist a8eb67fdfa76e1f3188f

This example demonstrates a scrolling visualization where sections of text trigger changes in a fixed graphic. The page uses D3’s custom `graphScroll` function to monitor scroll position, highlighting the active text section and applying CSS classes to the visualization to indicate whether it is fixed, scrolling, or below the viewport. The graphic responds to scroll progress, with sections becoming active as the user moves through the page, and the visualization dynamically updates its position relative to the viewport. Rendered with SVG and animation, the piece creates a scroll-driven storytelling experience where the graphic stays pinned while the text scrolls past.

BBenHeubl

66% match