Animate SVG path on scroll

100%

Animate SVG path on scroll

✓ Published0🌍 Public

Last edited Aug 10, 2018

Created on Aug 10, 2018

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.

AI-generated description

Make sure to pop out to a new window, and then scroll.

An experiment to see if I can get svg paths to animate only to a certain horizontal line while a user scrolls. Used in my unreleased wongfu side project.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/cdff7e8538477e7222b8'>Animate SVG path on scroll</a>

mit Licensed

Similar vizzes

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

95% match

Loading thumbnail…

SVG path animation

An animated marker follows a wiggly SVG path while the path itself appears to draw itself in a continuous loop. The example uses D3.js version 3 to load an external SVG file via `d3.xml` and then animates both the path’s `stroke-dasharray` and the marker’s position using `transition.attrTween` and `path.getPointAtLength`. The marker is a red circle repositioned at each animation tick, while the dash array interpolation creates the synchronous drawing effect. The animation runs infinitely via a recursive transition callback.

KKoGor

76% match

Loading thumbnail…

SVG path

A single SVG path element extends dynamically from an initial point, generating a zigzag line that grows downward across a tall, scrollable canvas. Using jQuery and helper functions in JavaScript, the path’s `d` attribute is updated with random horizontal and vertical increments, creating a new line segment for each iteration. The SVG is rendered with CSS-styled stroke properties, while the code manipulates the path coordinates directly.

AAndrei Tuta

76% match

Loading thumbnail…

SVG path animation

This example animates the stroke of SVG path elements to create a continuous drawing effect. It uses D3.js (v3) with a queue to load an external SVG file containing complex path data, then applies an infinite, looping transition. The animation interpolates the `stroke-dasharray` attribute using `d3.interpolateString` and `transition.attrTween`, calculating the path’s total length with `getTotalLength()` to reveal each path progressively. The paths are styled with CSS, setting a black stroke on a transparent fill.

KKoGor

75% match

Loading thumbnail…

scroll-unfixed

This example demonstrates a scrollytelling technique using an internal scrolling container instead of fixing a graphic to the viewport. A large orange div with `overflowY: scroll` contains an SVG of randomly generated line paths, and as the user scrolls, each line’s opacity changes based on its associated scroll position. The visualization uses D3v4 for DOM manipulation and SVG generation, and listens to the container’s `scroll` event to update line opacity dynamically, with layout handled through simple inline styles.

11wheel

75% match

Loading thumbnail…

a

This example shows an animated SVG path drawing itself over time, tracing an intricate, meandering line across an 800×600 canvas. The path is styled with `stroke-dasharray` and `stroke-dashoffset` and animated using a CSS `@keyframes` rule, which transitions the offset to zero over four seconds. The visualization relies on native SVG and CSS animation within an HTML document, with no external libraries or data bindings. The code is written for React, though the example itself is a standalone markup file demonstrating the core technique.

Xxyzcorrupt@gmail.com

75% match

Loading thumbnail…

SVG Fundamentals project

An animated blue line traces a complex looping path within an SVG element using the HTML5 `<animateMotion>` API. The path data, defined by a dense series of cubic Bézier coordinates, drives the continuous movement of the element along the curve. The rendering relies solely on native SVG path and animation capabilities within a minimal HTML page, requiring no external JavaScript libraries or frameworks. The project demonstrates fundamental SVG techniques for creating self-contained, animated vector graphics.

Ssahelmoazamigoodarzi@gmail.com

75% match

Loading thumbnail…

SVG path animation

A red dot animates along a black, wiggly SVG path, looping infinitely. The path is defined in an external SVG file. Built with D3.js v3, the visualization loads the SVG via `d3.xml`, extracts the path with a `d3.select`, and uses a `transition.attrTween` to move a circle marker based on `getPointAtLength` and `getTotalLength`, replicating Mike Bostock’s point-along-path interpolation example.

KKoGor

74% match